完成setTimeout后运行next函数

时间:2015-05-21 04:51:07

标签: javascript jquery

如何让它发挥作用?请帮助。

function first() {
    setTimeout((function() {
        $('#q').append('first <br>');
    }), 1000);
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}
$.when(first()).done(second()).done(third()); 

first()作为最后一个函数运行,我需要作为第一个

在这里小提琴:JSFIDDLE

7 个答案:

答案 0 :(得分:11)

我不确定你为什么这样做,但是如果你想同步执行它们,你可以将第二和第三个函数调用放在setTimeout中:

function first() {
    setTimeout(function() {
        $('#q').append('first <br>');
        second();
        third();
    }, 1000);
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}
first();

答案 1 :(得分:10)

当您可以使用javascript promises时,您不需要推迟jquery。

function first() {
   return new Promise(function(resolve, reject) {
     setTimeout((function() {
        $('#q').append('first <br>');
        resolve("Stuff worked!");
    }), 1000);
});
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}
first().then(second).then(third); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="q"></div>

执行最后一行first().then(second).then(third);的另一种方法 是通过制作

first().then(function () {
  second();
  third();
});

你可以做,因为你知道第二和第三个函数是同步函数,而不像第一个异步函数。

编辑:使用javascript承诺的原因或者在guest271314的回答jquery延迟的原因是因为如果你想先重用但是在你的代码的不同部分完成之后调用第一个或第二个之后你可以写一些东西到

的影响
first().then(function () {
  fourth();
  fifth();
});

你会在不改变功能的情况下写出来。 Promise和deferreds使异步代码更具可重用性。

编辑:

现在,您可以尝试async/await等待超时承诺,然后再执行第一个和第三个。

function timeout (ms) {
  return new Promise(res => setTimeout(res,ms));
}

function first () {
  // $('#q').append('first <br>'); 
  console.log("first");
}

function second() {
  // $('#q').append('second <br>');
  console.log("second");
}

function third() {
  // $('#q').append('third <br>');
  console.log("third");
}

async function fireEvents () {
  await timeout(1000);
  first();
  second();
  third();
}

console.log("started");
fireEvents().then(()=>console.log("done"));
console.log("after fireEvents");

答案 2 :(得分:2)

尝试在$.Deferred()中使用first,在$.Deferred()完成时返回setTimeout jQuery承诺,在second内调用third.done() }

function first() {
  var d = new $.Deferred();
  setTimeout((function() {
    $('#q').append('first <br>');
    d.resolve()
  }), 1000);
  return d.promise()
}

function second() {
  return $('#q').append('second <br>');

}

function third() {
  return $('#q').append('third <br>');
}

$.when(first()).done([second, third]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id='q'></div>

jsfiddle http://jsfiddle.net/hqphbhx3/1/

答案 3 :(得分:1)

一些问题:您的first功能(以及其他功能)未返回承诺,因此您无法使用done。如果您使用的是承诺,done会封锁承诺,并且不允许您链接另一个done电话。对于此设置,最好将函数调用嵌套为:

function first() {
    setTimeout((function() {
        $('#q').append('first <br>');
        second();
    }), 1000);
}
function second() {
    $('#q').append('second <br>');
    third();
}
function third() {
    $('#q').append('third <br>');
}

答案 4 :(得分:0)

如果要隔离功能,请尝试此操作。您将callback传递给first函数,当计时器超时时,将调用该回调。在该回调中,您可以拨打second()third()

function first(callback) {
    setTimeout(function() {
        $('#q').append('first <br>');
        callback();
    }, 1000);
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}
first(function(){
   second();
   third();
});

答案 5 :(得分:0)

试试这个..

function first() {
    setTimeout((function() {
        $('#q').append('first <br>');
        second();
        third();
    }), 1000);
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}
first();

答案 6 :(得分:0)

尝试:

function start() {
    setTimeout((function () {
        $.when(first()).done(second()).done(third());
    }), 1000);
}
function first() {
    $('#q').append('first <br>');
}
function second() {
    $('#q').append('second <br>');
}
function third() {
    $('#q').append('third <br>');
}

start();