410 CHAPTER 9 Asynchronous operations
- To provide an animated fade-in of the cover element, create a displayCoverAsync func-
tion and add code to fade to the value of the previously defined opacity value. Return
the promise object as follows.
function displayCoverAsync() {
return $('#cover').fadeTo(milliseconds, opacity).promise();
} - To set the message and provide an animated slide down from the top of the screen of
the message content, add a showMessageContentAsync function. In the function, add
code to set the HTML of the message element, add code to show the messageBox ele-
ment, and, finally, add code to slide the messageContent element down from the top,
using the millisecond variable as the duration, as follows.
function showMessageContentAsync(message) {
$('#message').html(message);
$('#messageBox').show();
return $('#messageContent').slideDown(milliseconds).promise();
} - Add a showMessageAsync function that has a message parameter.
This function will call the displayCoverAsync and set a coverPromise variable to the
returned promise object. - Add code that calls showMessageContentAsync after the displayCoverAsync has com-
pleted. Return a promise that identifies the completion of all asynchronous calls in the
function.
Your code should look like the following.
function showMessageAsync(message) {
var coverPromise = displayCoverAsync();
var messagePromise = coverPromise.pipe(function () {
return showMessageContentAsync(message);
});
return messagePromise;
} - When btnShowMessage is clicked, it will show a message using the current time. Add
a getTime function that returns the current time. Add a displayTimeAsync function
that creates a message by calling the getTime function and then calls the showMessa-
geAsync function.
Your code should look like the following.
function displayTimeAsync() {
var message = 'The time is now ' + getTime();
return showMessageAsync(message);
}
function getTime() {
var dateTime = new Date();
var hours = dateTime.getHours();
var minutes = dateTime.getMinutes();