另一个完成后运行功能

Question

function1 = function(){

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

}

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

function1();
function2();

所以我听说过jQuery的承诺。 我会返回一个“延迟”对象，在事件处理程序中我会调用deferred.resolve（）;

但是如果我在那里有多个事件处理程序并且我只希望下一个函数在所有事件被触发时运行会发生什么？ +我不喜欢将像“延迟”这样的外来东西引入代码的其他部分的想法。

有没有其他方法来检测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

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

试试（这种模式）

IEG，

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/