jQuery：在本地上下文中正確使用延遲（即沒有AJAX）

Question

道歉我肯定是一個轉發;我真的很看好我的問題的答案（我也明白）。

我想要學會做的是任意鏈功能，使他們必須在下一個發生之前完成，據我所知，這是jQuery's deferred()的目的。所以在下面的代碼中，我想象的應該是：

1. 負載延遲對象中包含的函數執行;之後
2. 包含在then（）中的函數執行;之後
3. done（）中包含的函數執行。

宇宙中的每個教程使用$.when()後$.ajax()對象，這是無用的，如果所有的人希望是在本地範圍內執行順序的控制。

這是我一直想：

var preloadDone = false, 
var testDone = false, 

var load = $.deferred(function() { 
       //cacheImages() is a plugin, works fine 
       $("img.image-loader.preload").cacheImages(); 
       preloadDone = true; 
      }); 

var loader = $.when(load) 
     .then(function() { 
     if (preloadDone) { 
      console.log("then called in sequence"); 
     } else { 
      console.log("then called out of sequence"); // wrong order, every time 
     } 
     XBS.cache.cbDone = true; 
}).done(function() { 
     if (XBS.cache.cbDone) { 
      console.log("even done was called in right sequence!"); // proper order, every time 
     } else { 
      console.log("done() wasn't called in order.."); 
     } 
}); 

load.resolve(); // nothing happens 
// load(); also tried this; nothing happens 

據我所知，這是相同的jQuery $.when()文檔中給出的例子。幫助嗎？

Answer 1

這裏是如何執行多種功能，一個又一個，但每個funtion完成後，才演示。這是通過使用異步功能實現的。

演示（運行3個功能一前一後。在那裏我有警報（「開始*」）即是你想把你喜歡做的工作，並在完成功能，您包括下一功能要運行。）

http://jsfiddle.net/5xLbk91c/

//the Assync function. Pause is the time in miliseconds to pause between loops 

var asyncFor = function(params) { 

    var defaults = { 
     total: 0, 
     limit: 1, 
     pause: 10, 
     context: this 
    }, 
     options = $.extend(defaults, params), 
     def = $.Deferred(), 
     step = 0, 
     done = 0; 

    this.loop = function() { 
     if (done < options.total) { 
     step = 0; 
     for (; step < options.limit; step += 1, done += 1) { 
      def.notifyWith(options.context, [done]); 
     } 
     setTimeout.apply(this, [this.loop, options.pause]); 
     } else { 
     def.resolveWith(options.context); 
     } 
    }; 

    setTimeout.apply(this, [this.loop, options.pause]); 
    return def; 
    }; 




function one() { 

asyncFor({ 
    total: 1, // run only once. If you want to loop then increase to desired total. 
    context: this 
}).progress(function(step) { 

alert("starting one") 

}).done(function() { 

alert("finished one") 

two() 

});  

} 

function two() { 

asyncFor({ 
    total: 1, 
    context: this 
}).progress(function(step) { 

alert("starting two") 

}).done(function() { 

alert("finished two") 

three() 

});  

} 

function three() { 

asyncFor({ 
    total: 1, 
    context: this 
}).progress(function(step) { 

alert("starting three") 

}).done(function() { 

alert("finished three and all done") 

});  

} 

Answer 2

你可能想通過這個改變了代碼，開始你的調查：

var load = function() { 
    var deferred = $.Deferred(); 
    $("img.image-loader.preload").cacheImages(); 
    preloadDone = true; 
    return deferred; 
}; 

也請注意，您可以通過承諾$。當陣列（）。

問候