jquery,如何在另一个函数结束时运行一个函数

Question

*注意:重写问题:

我试图在单个函数调用之外编写以下内容:

例:

function f1(){
    do something 1
}
function f2(){
    do something 2   
}

run function 1
when done
run function 2

(请参阅以下有关jsfiddles的评论)

问题是,盒子同时加载.行为应该是,加载红色,完成后,加载绿色.

如果这不是jQuery中的常用方法,请告诉我,也许我只是在追逐一个幽灵......

Answer 1

取决于功能.

简短回答:

对于同步功能:只需一个接一个地调用它们.

对于异步函数:取决于使它异步的原因.

jQuery动画？从动画的方法或fx队列的Promise对象定义回调参数.

setTimeout/setInterval /还有别的吗？最有可能的是,需要重写函数以提供回调或Deferred/Promise对象.

请参阅此或此示例.

答案很长:

根据你评论中的jsFiddles,你有这两个功能:

function firstFunction(){
    $(".one").fadeIn(1000).delay(2000).fadeOut();
}
function secondFunction(){
    $(".two").fadeIn(1000).delay(2000).fadeOut();
}

你想secondFunction追求firstFunction,你不想篡改这些功能.如果是这种情况,我只能想到一个解决方案:从动画元素中获取Promise对象firstFunction,然后定义secondFunction为成功处理程序:

firstFunction();
$('.one').promise().then(secondFunction);

的jsfiddle

promise()返回绑定到该元素的当前动画状态的Promise对象.$('.one').promise().then(secondFunction)本质上是在说"我保证secondFunction在完成当前动画时运行.one.

如果你愿意与现有的功能,篡改,您还可以拨打secondFunction作为的回调参数fadeOut内firstFunction,但是这不是一个很优雅的解决方案.

如果您愿意重写您的函数,理想的解决方案是使用Deferreds和Promises来驯服您的异步函数.这是一个快速入门:

• 在jQuery中,Deferred对象是一个特殊对象,可用于定义函数的成功/失败状态.你在你的功能中使用它.
• 一个承诺对象是一个特殊的对象,你可以用它来添加回调那些成功/失败状态.你在函数之外使用它.

使用这些工具,您可以重写函数以指定它们何时"完成",并且您可以为函数外部的代码提供知道它们何时完成(以及执行之后)的能力.

重写为使用Deferred和Promise,代码如下所示:

function firstFunction(){
    var deferred = $.Deferred();
    $(".one").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}
function secondFunction(){
    var deferred = $.Deferred();
    $(".two").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}

firstFunction().then(secondFunction);

的jsfiddle

如果以这种方式编写所有函数,则可以控制它们的执行顺序并使用它们顺序运行then().这是一个更彻底的例子:

function one(){
    var deferred = $.Deferred();
    $(".one").fadeOut(500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function two(){
    var deferred = $.Deferred();
    $(".two").fadeOut(1500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function three(){
    var deferred = $.Deferred();
    $(".three").fadeOut(1000, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function four(){
    var deferred = $.Deferred();
    $(".four").fadeOut(750, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function five(){
    var deferred = $.Deferred();
    $(".five").fadeOut(600, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

one()
    .then(two)
    .then(three)
    .then(four)
    .then(five);

的jsfiddle

Answer 2

递延是一个选项。您始终可以执行以下操作：

$.when(firstFunction()).then(secondFunction);

唯一的技巧是在firstFunction内部，您需要执行以下操作：

function firstFunction(){
    var deferred = $.Deffered();

    $.get(url,function(r){
        deferred.resolve();
    });

    return deferred;
}

when函数将等待，直到firstFunction调用返回的deferred被解析。一旦解决了延迟问题（在ajax成功回调中），则将触发'.then'语句，调用您的secondFunction。

jQuery文档很好地解释了Deferred API。

Answer 3

你可以简单地在第一个函数的末尾调用第二个函数.

 $(document).ready(function() {

  function firstFunction(){
    alert("this is the first function!");
    secondFunction();
  }
  function secondFunction(){
    alert("this is the second function!");
  }

  firstFunction();
});

小提琴

或者,如果您不希望每次拨打第一个功能时都拨打第二个功能,则可以按顺序呼叫它们

firstFunction();
secondFunction();

这是有效的,因为它会等到firstFunction它完成之后才会变得secondFunction 小提琴