如果我需要一个接一个地调用此函数,
$('#art1').animate({'width':'1000px'},1000); $('#art2').animate({'width':'1000px'},1000); $('#art3').animate({'width':'1000px'},1000);
我知道在jQuery中我可以做类似的事情:
$('#art1').animate({'width':'1000px'},1000,'linear',function(){ $('#art2').animate({'width':'1000px'},1000,'linear',function(){ $('#art3').animate({'width':'1000px'},1000); }); });
但是,假设我没有使用jQuery,而是要调用:
some_3secs_function(some_value); some_5secs_function(some_value); some_8secs_function(some_value);
我应该如何调用此函数以便执行some_3secs_function,然后在调用结束后执行,然后执行,然后在some_5secs_function调用结束后再调用some_8secs_function?
some_3secs_function
some_5secs_function
some_8secs_function
更新:
这仍然无法正常工作:
(function(callback){ $('#art1').animate({'width':'1000px'},1000); callback(); })((function(callback2){ $('#art2').animate({'width':'1000px'},1000); callback2(); })(function(){ $('#art3').animate({'width':'1000px'},1000); }));
三个动画同时开始
我的错误在哪里?
在Javascript中,有 同步 和 异步 功能。
Javascript中的大多数功能都是同步的。如果要连续调用多个同步函数
doSomething(); doSomethingElse(); doSomethingUsefulThisTime();
他们将按顺序执行。doSomethingElse直到doSomething完成才开始。doSomethingUsefulThisTime,直到doSomethingElse完成才开始。
doSomethingElse
doSomething
doSomethingUsefulThisTime
但是,异步功能不会彼此等待。让我们看一下与上面相同的代码示例,这次假设函数是异步的
这些函数将按顺序初始化,但是它们几乎都将同时执行。您无法始终如一地预测哪个将最先完成:恰好花费最短时间执行的那个将最先完成。
但是有时,您希望异步执行的函数按顺序执行,有时,您希望同步执行的函数异步执行。幸运的是,这分别可以通过回调和超时实现。
让我们假设我们有三个异步函数,我们想以此来执行,some_3secs_function,some_5secs_function,和some_8secs_function。
由于可以在Javascript中将函数作为参数传递,因此您可以将函数作为回调传递,以在函数完成后执行。
如果我们创建这样的功能
function some_3secs_function(value, callback){ //do stuff callback(); }
那么您可以按如下顺序依次致电:
some_3secs_function(some_value, function() { some_5secs_function(other_value, function() { some_8secs_function(third_value, function() { //All three functions have completed, in order. }); }); });
在Javascript中,您可以告诉函数在某个超时(以毫秒为单位)后执行。实际上,这可以使同步函数异步运行。
如果我们有三个同步函数,则可以使用该setTimeout函数异步执行它们。
setTimeout
setTimeout(doSomething, 10); setTimeout(doSomethingElse, 10); setTimeout(doSomethingUsefulThisTime, 10);
但是,这有点丑陋,并且违反了DRY原则wikipedia。我们可以通过创建一个接受函数数组和超时的函数来对此进行清理。
function executeAsynchronously(functions, timeout) { for(var i = 0; i < functions.length; i++) { setTimeout(functions[i], timeout); } }
可以这样称呼:
executeAsynchronously( [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);
总而言之,如果您具有要同步执行的异步功能,请使用回调;如果要同步执行的异步功能,请使用超时。