我应该如何调用 3 个函数以便一个接一个地执行它们? [英] How should I call 3 functions in order to execute them one after the other?

问题描述

如果我需要一个接一个地调用这个函数，

If I need call this functions one after other,

$('#art1').animate({'width':'1000px'},1000);        
$('#art2').animate({'width':'1000px'},1000);        
$('#art3').animate({'width':'1000px'},1000);        

我知道在 jQuery 中我可以执行以下操作:

I know in jQuery I could do something like:

$('#art1').animate({'width':'1000px'},1000,'linear',function(){
    $('#art2').animate({'width':'1000px'},1000,'linear',function(){
        $('#art3').animate({'width':'1000px'},1000);        
    });        
});        

但是，让我们假设我没有使用 jQuery 并且我想调用:

But, let's assume that I'm not using jQuery and I want to call:

some_3secs_function(some_value);        
some_5secs_function(some_value);        
some_8secs_function(some_value);        

我应该如何调用这个函数来执行some_3secs_function，然后调用结束后执行some_5secs_function，调用结束后调用some_8secs_function?

How I should call this functions in order to execute some_3secs_function, and AFTER that call ends, then execute some_5secs_function and AFTER that call ends, then call 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中，有同步和异步函数.

In Javascript, there are synchronous and asynchronous functions.

Javascript 中的大多数函数都是同步的.如果要连续调用多个同步函数

Most functions in Javascript are synchronous. If you were to call several synchronous functions in a row

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

它们将按顺序执行.doSomethingElse 在 doSomething 完成之前不会启动.doSomethingUsefulThisTime 反过来，在 doSomethingElse 完成之前不会开始.

they will execute in order. doSomethingElse will not start until doSomething has completed. doSomethingUsefulThisTime, in turn, will not start until doSomethingElse has completed.

然而，异步函数不会互相等待.让我们看一下上面相同的代码示例，这次假设函数是异步的

Asynchronous function, however, will not wait for each other. Let us look at the same code sample we had above, this time assuming that the functions are asynchronous

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

函数将按顺序初始化，但它们将大致同时执行.您无法始终如一地预测哪个将首先完成:恰好花费最短时间执行的那个将首先完成.

The functions will be initialized in order, but they will all execute roughly at the same time. You can't consistently predict which one will finish first: the one that happens to take the shortest amount of time to execute will finish first.

但有时，您希望异步函数按顺序执行，有时您希望同步函数异步执行.幸运的是，这可以分别通过回调和超时实现.

But sometimes, you want functions that are asynchronous to execute in order, and sometimes you want functions that are synchronous to execute asynchronously. Fortunately, this is possible with callbacks and timeouts, respectively.

假设我们要按顺序执行三个异步函数，some_3secs_function、some_5secs_function 和 some_8secs_function.

Let's assume that we have three asynchronous functions that we want to execute in order, some_3secs_function, some_5secs_function, and some_8secs_function.

由于在Javascript中函数可以作为参数传递，因此您可以将函数作为回调传递给函数完成后执行.

Since functions can be passed as arguments in Javascript, you can pass a function as a callback to execute after the function has completed.

如果我们创建这样的函数

If we create the functions like this

function some_3secs_function(value, callback){
  //do stuff
  callback();
}

那么你可以按顺序调用 then，就像这样:

then you can call then in order, like this:

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 中，您可以告诉函数在特定超时(以毫秒为单位)后执行.这实际上可以使同步函数以异步方式运行.

Timeouts

In Javascript, you can tell a function to execute after a certain timeout (in milliseconds). This can, in effect, make synchronous functions behave asynchronously.

如果我们有三个同步函数，我们可以使用setTimeout函数异步执行它们.

If we have three synchronous functions, we can execute them asynchronously using the setTimeout function.

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

然而，这有点难看，并且违反了DRY 原则^[wikipedia].我们可以通过创建一个接受函数数组和超时的函数来稍微清理一下.

This is, however, a bit ugly and violates the DRY principle^[wikipedia]. We could clean this up a bit by creating a function that accepts an array of functions and a timeout.

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

可以这样调用:

executeAsynchronously(
    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

总而言之，如果您有要同步执行的异步函数，请使用回调，如果您有要异步执行的同步函数，请使用超时.

In summary, if you have asynchronous functions that you want to execute syncronously, use callbacks, and if you have synchronous functions that you want to execute asynchronously, use timeouts.

这篇关于我应该如何调用 3 个函数以便一个接一个地执行它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！