使用虚拟和空jQuery承诺

Bob*_*y B 4 javascript jquery promise jquery-deferred

我使用jQuery运行多个动画并在完成后执行一些操作promises:

$.when(foo(),  
       bar(),  
       baz())  
 .done(allDone);  
Run Code Online (Sandbox Code Playgroud)

每个函数(foo等)返回一个jQuery.Promise().

现在说我想要包含一个不动画任何东西的函数,但它的时间与动画有关 - 我不能将它包含在链中,因为它不会返回一个承诺.

所以我可以像这样破解它:

function qux() {
  if (something) {
    return $(".whatever")
      .removeClass("bob")
      .addClass("fred")
      .append(/*...do stuff...*/)
      .animate({ left: "+=0" }, 0, callback ) // <-- dummy animation does nothing
      .promise();                             // <-- this is a dummy promise
  }
  else {
    return $().promise();                     // <-- this is an "empty" promise
  }
}
Run Code Online (Sandbox Code Playgroud)

现在我可以链接它:

$.when(foo(),  
       bar(),  
       baz(),
       qux())  
 .done(allDone);  
Run Code Online (Sandbox Code Playgroud)

这有效.但是我在这里弯曲规则 - 有没有我没有考虑到的问题,或者我在某种程度上踩到了fx队列?

更新
根据以下答案,该qux()功能可以重写为:

function qux() {
  if (something) {
    $(".whatever")
      .removeClass("bob")
      .addClass("fred")
      .append(/*...do stuff...*/);
  }
}
Run Code Online (Sandbox Code Playgroud)

Yur*_*nko 7

如果您打算使用它,$.when则无需返回空的承诺.$.when可以处理非承诺.演示.

function promise(flag) {
    if(flag) {
        var dfd = $.Deferred();
        setTimeout(function(){
            console.log('promise');
            dfd.resolve();
        }, 1000);
        return dfd.promise();
    }

    console.log('promise');
}

$.when(promise(), promise(true), promise(), 15).done(function(){
    console.log('Done');    
});
Run Code Online (Sandbox Code Playgroud)

如果你想返回一个空的承诺,你可以使用 $.Deferred().resolve().promise()