jQuery承诺一切

Question

这种模式在 jQuery 或 javascript 中是否可行？：

$.when(function(){

    //I init many plugins here, some of them use ajax etc but I dont really control it
    //I only do something like $(div).somePlugin() here
    $("div").myPlugin()

}).done(function(){

   //and this part I want to be executed when all ajaxes and deferred stuff from when part is done
   //however I cannot go to every plugin and add something like deferred.resolve() etc.

});

例如，myPlugin 会有

$.fn.myPlugin = function(){
    $(this).load(someUrl);
};

（但我无法将 myPlugin 更改为它的一些外部代码。）

基本上我发生了很多事情，其中​​很多都使用async。功能。当所有这些async 时，我想执行一些功能。东西已经完成了，但我不能更改插件代码，所以我不能添加.resolve() 东西。

Answer 1

是的，这基本上就是.when 所做的！

// changes body html
var fisrtApi = $.get("http://something/foo").then(function(r){ $("body div").html(r); }); 
// inits some API for usage
var secondApi = somePromiseReturningFucntion();
// sets a plugin on top of a page    
var somePlugin = someOtherPromiseReturningFn();


$.when(firstApi,secondApi,somePlugin).done(function(r1, r2, r3){
     // all of them ready, results are the arguments
});

也可以pretty straightforward 将常规的非承诺返回 API 转换为承诺。

例如，让我们做$(document).ready(function(){

// returns a promise on the document being ready
function whenDocumentReady(){
    var d = $.Deferred();
    $(document).ready(function(){ d.resolve(); });
    return d.promise();
};

这会让你做什么：

$.when($.get("http://yourAPI"), whenDocumentReady()).done(function(apiResult,_){
    // access API here, the document is also ready.
});

例如 - 使用 jQuery twitter，库在完成获取数据时提供回调。你会答应它：

function getTweets(username, limit){
    var d = $.Deferred();
    $.twitter(username, limit , function(res){ d.resolve(res); });
    return d.promise();
}

这会让你做什么：

$.when(getTweets("someusername"),whenDocumentReady()).done(function(tweets){
       // document is ready here _and_ the twitter data is available,
       // you can access it in the `tweets` parameter
});

Answer 2

如果这就是你要找的，那么是的，这是完全可能的

$.when(sync(), async(), ajax()).done(function(s,a1, a2) {
   console.log( s + ' + ' + a1  + ' + ' + a2)     // outputs sync + async + ajax      
})

function sync() {
    return 'sync'   
}

function async() {
    var d = $.Deferred();

    setTimeout(function() {
        d.resolve('async')        
    }, 100)    

    return d;        
}

function ajax() {
    return $.post('http://jsfiddle.net/echo/html/', { html: 'ajax' })
}

Answer 3

我想这样做的唯一方法有点丑。

如果你不能使用 deferreds 和 resolve 方法，你别无选择，只能监听 dom 或 context 的变化（插件通常修改 DOM 或在 context 中创建新对象）。

然后你将不得不寻找$(myElt).hasClass('<class_created_and_applied_by_my_plugin>')从假到真，或类似的东西。

你必须为每个插件创建一个deferred，并将之前的测试包装在一个setInterval中来模拟一个监听器，最后解决deferred。

这样，您可以将所有的 deferred 放入一个 when 并确保在继续之前它们都已解决。

但这真的很丑，因为你必须为每个插件个性化测试。 而且我想，这肯定也会降低浏览器的速度。