Question

function1 = function(){

  something.on('transitionend', function(){
    // now function2 should run
  });

}

function2 = function(){
  alert('ok');
}

function1();
function2();

所以我听说过jQuery的承诺。我会回复一个＆＃34; deferred＆＃34;对象，在事件处理程序中我会调用deferred.resolve（）;

但是如果我在那里有多个事件处理程序并且我只希望下一个函数在所有事件被触发时运行会发生什么？ +我不喜欢介绍一些外国人的想法，例如＆＃34; deferred＆＃34;进入代码的其他部分。

还有其他方法来检测function1是否已完成所有工作吗？

Answer 1

试试这个，

 $.when($.ajax(fuction1())).then(function () {

    fuction2;

});

这里fuction1是你的第一个调用函数，fuction2是你的第二个函数。

Answer 2

要么采取承诺方法，要么采取回调方法。

使用回调功能，您可以将function2作为参数传递给function1;

function1 = function(callback){

  something.on('transitionend', function(){
      callback();
  });

}

function2 = function(){
  alert('ok');
}

function1(function2);

...但如果function3依赖于function2，function4依赖于3，那么你就会陷入困境。

这就是你走下延迟路线的原因;

function1 = function(){
  var def = new jQuery.Deferred();

  something.on('transitionend', function(){
      def.resolve(arguments);
  });

  return def.promise();
}

function2 = function(){
  alert('ok');
}

function1().done(function2);

...这将允许你链接连续的函数而不是嵌套它们（当然，提供它们都返回了承诺）。

将事件处理程序和延迟组合起来有点混乱。所以如果你走下了拥有多个事件处理程序的道路，你最终不得不做一些蹩脚的事情，例如;

function1 = function(){
  var def = new jQuery.Deferred();
  var wait = 4;

  function maybeFire() {
      if (--wait) {
          def.resolve();
      }
  }

  something.on('transitionend', maybeFire);
  something.on('somethingelse', maybeFire);
  something.on('somethingelse', maybeFire);
  something.on('somethingelse', maybeFire);

  return def.promise();
}

function2 = function(){
  alert('ok');
}

function1().done(function2);

组合多个延迟的真正的方式是使用$.when()，但不幸的是，这里没有多个延迟，并且添加它们将是使用maybeFire方法时很乱。

Answer 3

注意，如果在transitionend all属性值中设置了css，则transition事件可能会多次触发

尝试（此模式）

i.e.g。，

HTML

<button>click</button>

CSS

button {
    width: 100px;
    -webkit-transition: width 1s;
}
.transition {
    width: 150px
}

JS

$(function() {
    // `$.Callbacks("once")` to fire `alert` once ,
    // even if `all` set within `css` `transition` 
    // property value
    var callbacks = $.Callbacks(); 

    function2 = function(j) {
      alert(j);
    };

    callbacks.add(function2);

    $(window).on("transitionComplete", function(e, i) {
     // function2(i);
        callbacks.fireWith($(this), [i]);
    });
    // `webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd`
    function1 = function() {
      $("button").on('transitionend', function (e) {
        $(window).trigger("transitionComplete", ["ok"]);
      });
    };

    function1();

    $("button").on("click", function(e) {
      $(this).toggleClass("transition");
    });

});

jsfiddle http://jsfiddle.net/guest271314/u7B9K/

另一个完成后运行功能

3 个答案: