Javascript 在另一个函数完成后运行该函数

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

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

---

有没有其他方法可以检测function1是否完成了所有工作？

要么采用承诺方法，要么采用回调方法

通过回调，您可以将

function2

作为参数传递给

function1

function1 = function(){

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

}

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

function1();
function2();

。。。但是如果您有依赖于

function2

的

function3

和依赖于3的

function4

，则会得到嵌套的地狱

这就是为什么你要走推迟的路线

function1 = function(callback){

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

}

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

function1(function2);

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

将事件处理程序和延迟组合在一起有点混乱。因此，如果您使用多个事件处理程序，那么您将不得不做一些蹩脚的事情，例如

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

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

  return def.promise();
}

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

function1().done(function2);

---

合并多个延期的真正方法是使用，但不幸的是，在这里您没有多个延期，添加它们将像使用

maybeFire

方法一样麻烦。

注意，如果在

css

transition

属性值中设置了

all

，则

transitionnd

事件可能会触发多次

试试（这种模式）

i、 例如：

html

js

jshiddle

试试这个

$(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");
    });

});

---

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

将

function2

作为参数传递给

function1

，并在

上的
回调中调用它。如：
function1（function2）然后：
function1=function（callback）{something.on（'transitionend'，callback）；}
看看它的价值，我尝试使用它，它导致我的页面重新加载。。在我的例子中，这意味着对geolocator api的3次调用
<button>click</button>

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

$(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");
    });

});

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

    fuction2;

});