我应该怎么称呼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);
    }));

三个动画在同一时间启动

Three animations start at same time

在哪里是我的错误。

推荐答案

在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.

异步功能，但不会等待对方。让我们来看看上面我们有相同的code样品，这个时候假设函数是异步的。

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();

的功能将在顺序被初始化，但它们将都在同一时间大致执行。你不能始终如一predict哪一个会先完成：出现这种情况采取最短的时间量来执行将先完成一个

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 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原则 ^[百科] 。我们可以通过创建一个接受的功能和超时阵列功能有点打扫一下。

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);

总之，如果您有想要syncronously执行，使用回调，异步函数，如果您有想要异步执行的同步功能，使用超时。

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屋！