Learning jQuery Deferreds

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

• Learning jQuery Deferreds

• By: Terry Jones; Nicholas H. Tollervey

• Publisher: O'Reilly Media, Inc.

• Pub. Date: December 27, 2013

• Print ISBN-13: 978-1-4493-6939-2

• Pages in Print Edition: 132

• Subscriber Rating: [2 Ratings] Subscriber Reviews

• 
  
  

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Learning deferred earning Jquery Query Media

1. Query Deferreds
   
2. We chose to focus on jQuery deferreds because jQuery is ubiquitous and because two important and familiar aspects of jQuery ($.ajax and animations) already have deferred support built in.
   
3. 
   
4. However, jQuery deferreds are certainly not the last word on the subject. As you will see, they differ markedly in one important respect from the many (at least 35) other deferred packages for JavaScript: jQuery deferreds do not currently follow the excellent Promises/A+ specification (see Promises/A+).
   
5. 
   
6. This book was written for the 1.10.2 or 2.0.3 versions of jQuery. Because the jQuery deferred API has changed several times, it is important to know where you stand, as we’ll see in Changes in the jQuery Deferred API. Server side, we’re using version 1.9.1 of the jQuery-deferred node module. The node module and much of the jQuery deferred code was written by Julian Aubourg.

复制代码

1. Creating Deferreds
   
2. Once you’re comfortable receiving promises from functions and working with them by attaching callbacks, you’ll soon want to write your own function or API that creates a deferred and returns its promise.
   
3. 
   
4. Construction
   
5. To create a deferred, you just call $.Deferred():
   
6. 
   
7. var deferred = $.Deferred();
   
8. As discussed in Terminology: Deferreds and Promises, instead of returning a deferred to the caller of your code, you’ll almost always want to return a promise. The promise is obtained by calling the promise method on the deferred:
   
9. 
   
10. var deferred = $.Deferred(),
    
11.     promise = deferred.promise();
    
12. For convenience, the $.Deferred constructor allows you to pass it a function that can be used to initialize the deferred once it is created. The function receives the deferred as its only argument. For example, here’s a handy succeed function[6] that returns a promise that has already been fired with a specified result:
    
13. 
    
14. function succeed(value){
    
15.     return $.Deferred(function(d){
    
16.         d.resolve(value);
    
17.     }).promise();
    
18. }

复制代码

1. Here’s a simple replacement for setTimeout that uses deferreds. This is adapted from Fun With jQuery Deferreds by Michael Bleigh.
   
2. 
   
3. function wait(timeout){
   
4.     var deferred = $.Deferred();
   
5.     setTimeout(deferred.resolve, timeout);
   
6.     return deferred.promise();
   
7. }
   
8. And here’s how you use it:
   
9. 
   
10. wait(500).done(function(){
    
11.     console.log('Timeout fired!');
    
12. });
    
13. This produces the following, as you would expect:
    
14. 
    
15. Timeout fired!

复制代码

1. With the sendMessageDeferred function in place, we can now use it in our code:
   
2. 
   
3. sendMessageDeferred(17, { action: 'addSidebar' })
   
4. .done(function(result){
   
5.     if (result.success){
   
6.         console.log('Sidebar added to DOM.');
   
7.     }
   
8.     else {
   
9.         console.error('Could not add sidebar to tab 17:', result.error);
   
10.     }
    
11. })
    
12. .fail(function(error){
    
13.     console.error('Chrome error:', error);
    
14. });
    
15. We could use $.when to send messages to several tabs, only proceeding once all tabs had replied:
    
16. 
    
17. $.when(
    
18.     sendMessageDeferred(17, { action: 'addSidebar' }),
    
19.     sendMessageDeferred(18, { action: 'hideSidebar' }),
    
20.     sendMessageDeferred(19, { action: 'hideSidebar' })
    
21. )
    
22. .done(function(){
    
23.     console.log('All tab sidebars adjusted.');
    
24. })
    
25. .fail(function(error){
    
26.     console.error('Chrome error:', error);
    
27. });

复制代码

1. To make a deferred method for set, we don’t really need to know what items represents. All we need to know is that callback will be called by Chrome when it has set the key values it is given. Our version of set will look as follows:
   
2. 
   
3. function set(items){
   
4.     var deferred = $.Deferred(); // 1
   
5.     chrome.storage.local.set(items, function(){
   
6.         if (chrome.runtime.lasterror){
   
7.             deferred.reject(chrome.runtime.lasterror.message); // 2 }
   
8.         else {
   
9.             deferred.resolve(); // 3 }
   
10.     });
    
11. 
    
12.     return deferred.promise(); // 4 }
    
13. This should look familiar by now. It follows the classic pattern:
    
14. 
    
15. 1
    
16. Create a deferred.
    
17. 
    
18. 2
    
19. Arrange to reject the deferred in case of error.
    
20. 
    
21. 3
    
22. Arrange to resolve the deferred with a result if no error occurs.
    
23. 
    
24. 4
    
25. Return a promise created from the deferred.
    
26. 
    
27. You’d use the above set function as follows:
    
28. 
    
29. set({
    
30.     lastURL: 'http://bit.ly/jquery-deferreds',
    
31.     timestamp: new Date().toUTCString()
    
32. }).done(function(){
    
33.     // Keys for the user's last URL and timestamp saved to local storage.
    
34. });

复制代码

1. function synchronously(tasks){
   
2.     var i, task, func,
   
3.         promise = $.Deferred().resolve().promise(), // 1 makeRunner = function(func, args){ // 2 return function(){
   
4.                 return func.apply(null, args).promise();
   
5.             };
   
6.         };
   
7.     for (i = 0; i < tasks.length; i++){
   
8.         task = tasks[i];
   
9.         func = task.shift();
   
10.         promise = promise.then(makeRunner(func, task)); // 3 }
    
11.     return promise;
    
12. }
    
13. This works as follows:
    
14. 
    
15. 1
    
16. Create a promise variable that we’ll eventually return. The deferred from which the promise is made is resolved immediately with an undefined value. When we first call then on that promise, the function we pass to then will be run immediately. Note that we don’t care about the value the promise fires with; we’re just trying to get the task functions run sequentially.
    
17. 
    
18. 2
    
19. makeRunner functions as a closure that returns a function to invoke the current task with its arguments. Note that we assume that calling func returns either a promise or something that can be used to obtain a promise.
    
20. 
    
21. There is an unfortunate subtlety here. All promises have a promise method (undocumented!) that, when called with no arguments, returns the promise. The method is actually identical to the (documented) promise method of its deferred. So if func returns a promise, calling promise() on it simply returns the promise. More usefully, if func happens to be a call to animate, the call to promise() is essential—it ensures that the returned value, passed to then, is a promise. See the challenges below for more on this.
    
22. 
    
23. 3
    
24. This slightly dubious line reuses (updates) the promise variable to hold the promise returned by calling then on the current promise. In effect, we’re adding a new function to be called when the current promise is done and then forgetting about that promise. We only have to worry about the most recent promise, which we return to our caller. Because the original promise was fired on creation, we don’t have to hang onto it for any reason.

复制代码