在jquery中顺序调用多个函数[重复]答案

【问题标题】：Calling multiple functions sequentially in jquery [duplicate]在jquery中顺序调用多个函数[重复]
【发布时间】：2013-02-04 18:08:46
【问题描述】：

可能重复：
Delay to next function in method chain

有4个功能...

function fn1()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
    },5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
    },4000);
}
function fn3()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 3<br/>');
    },3000);     
}
function fn4()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 4<br/>');
    },1000);
}

现在，当我在按钮单击事件中一一调用这些时，它不起作用。按钮点击事件 -

$("#cmd_sync_tally").click(function(event){
    event.preventDefault();
    fn1();
    fn2();
    fn3();
    fn4();
});

结果应该是第一个函数 1 执行并写入值，然后是函数 2，依此类推。

Calling from function 4
Calling from function 3
Calling from function 2
Calling from function 1

我想知道，如何使这些调用顺序，以便函数一个接一个地执行。

【问题讨论】：

标签： jquery

【解决方案1】：

你所有的功能都是同时编程的，就是从超时计数开始的。

如果您想按顺序调用同时编程的函数，最简洁的解决方案是将它们链接起来：

function fn1() {   
    setTimeout(function() {
        $("#div_result_area").append('Calling from function 1<br/>');
        f2();
    },5000);
}

您可以为此使用回调模式：

function fn1(callback) {   
    setTimeout(function() {
        $("#div_result_area").append('Calling from function 1<br/>');
        callback();
    },5000);
}
...
fn1(function(){
   fn2(function(){
      fn3(fn4)
   });
});

您还可以定义超时，以便它们相加：

var time = 0;
function fn1() {   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
    },time+=5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
    },time+=4000);
}
etc.

但是，如果您经常这样做，并且想要排队的函数更多，那么最好的办法就是实现一个队列，就像在 jQuery 中所做的那样。你可以在this related question看到这样的实现。

【讨论】：

【解决方案2】：

您的函数以正确的顺序被调用，但超时导致它们以相反的顺序发生，因为所有超时都设置在脚本运行时几乎完全相同的时间。

换句话说，您有 4 个单独的超时设置并同时运行。

要获得您正在寻找的效果，您应该在超时时从前一个函数中调用每个函数。

function fn1()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
        fn2();
    },5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
        fn3();
    },4000);
}
function fn3()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 3<br/>');
        fn4();
    },3000);     
}
function fn4()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 4<br/>');
    },1000);
}

$("#cmd_sync_tally").click(function(event){
    event.preventDefault();
    fn1();
});

在我的jsfiddle.查看一个工作示例

您似乎希望函数间隔 1 秒执行，因此如果这是您的目标，您必须将所有超时更改为 1000。

【讨论】：