Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

412 CHAPTER 9 Asynchronous operations

31. Add a hideCoverAsync function. In the function, add code to fade out the cover ele-
    ment and return the promise object, as follows.
    function hideCoverAsync() {
    return $('#cover').fadeOut(milliseconds).promise();
    }


32. Add a hideMessageAsync function that calls the hideMessageContentAsync func-
    tion and assigns the returned promise to a messagePromise variable. Add code to call
    the hideCoverAsync function when messagePromise has completed and assign the
    returned promise to a coverPromise variable. Return coverPromise as shown in the fol-
    lowing code example.
    function hideMessageAsync() {
    var messagePromise = hideMessageContentAsync();
    var coverPromise = messagePromise.pipe(function () {
    return hideCoverAsync();
    });
    return coverPromise;
    }


33. Modify the existing document-ready code to subscribe to the click event of the mes-
    sageOk button and call the hideMessageAsync function as follows.
    $(document).ready(function () {
    $('#btnShowMessage').click(displayTimeAsync);
    $('#messageOk').click(hideMessageAsync);
    });


34. Run the application.
    When you click the Show Message button, the animated message is displayed. When
    you click the OK button, the message is removed from the screen by sliding up to the
    top of the screen, and then the cover fades out.

Suggested practice exercises

The following additional exercises are designed to give you more opportunities to practice

what you’ve learned and to help you successfully master the lessons presented in this chapter.

■■Exercise 1 Learn more about asynchronous operations by writing more code that

makes asynchronous calls to web services.

■■Exercise 2 Learn more about web workers by writing an application that has a web

worker that performs client-side code.