我应该如何调用3个函数来一个接一个地执行它们？

Question

我应该如何调用3个函数来一个接一个地执行它们？如果我需要一个接一个地调用这个函数，        $('#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？更新：这仍然无效：    (function(callback){         $('#art1').animate({'width':'1000px'},1000);         callback();     })((function(callback2){         $('#art2').animate({'width':'1000px'},1000);         callback2();     })(function(){         $('#art3').animate({'width':'1000px'},1000);     }));三个动画同时开始我的错误在哪里

Answer 1

这个答案使用promises了ECMAScript 6标准的JavaScript功能。如果您的目标平台不支持promises，请使用PromiseJs对其进行填充。

在这里查看我的答案等到动画功能完成，直到运行另一个功能，如果你想使用jQuery动画。

这里是你的代码将会是什么样ES6 Promises和jQuery animations。

Promise.resolve($('#art1').animate({ 'width': '1000px' }, 1000).promise()).then(function(){
    return Promise.resolve($('#art2').animate({ 'width': '1000px' }, 1000).promise());}).then(function(){
    return Promise.resolve($('#art3').animate({ 'width': '1000px' }, 1000).promise());});

普通方法也可以包含在内Promises。

new Promise(function(fulfill, reject){
    //do something for 5 seconds
    fulfill(result);}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 5 seconds
        fulfill(result);
    });}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 8 seconds
        fulfill(result);
    });}).then(function(result){
    //do something with the result});

完成后then立即执行该方法Promise。通常，function传递给的返回值then作为结果传递给下一个。

但是如果Promise返回a，则下一个then函数将等待直到Promise执行完并收到它的结果（传递给的值fulfill）。

Answer 2

听起来你并没有完全理解同步和异步函数执行之间的区别。

您在更新中提供的代码会立即执行每个回调函数，这些函数会立即启动动画。但是，动画是异步执行的。它的工作原理如下：

1. 在动画中执行一个步骤

2. setTimeout使用包含下一个动画步骤和延迟的函数调用

3. 一段时间过去了

4. setTimeout执行的回调

5. 回到第1步

这将继续，直到动画的最后一步完成。与此同时，您的同步功能早已完成。换句话说，你的通话animate功能并没有真正需要3秒钟。通过延迟和回调模拟效果。

你需要的是一个队列。在内部，jQuery的排队动画，只执行你一旦其对应的动画完成回调。如果你的回调然后开始另一个动画，效果是它们按顺序执行。

在最简单的情况下，这相当于以下内容：

window.setTimeout(function() {
    alert("!");
    // set another timeout once the first completes
    window.setTimeout(function() {
        alert("!!");
    }, 1000);}, 3000); // longer, but first

这是一个通用的异步循环函数。它将按顺序调用给定的函数，等待每个函数之间指定的秒数。

function loop() {
    var args = arguments;
    if (args.length <= 0)
        return;
    (function chain(i) {
        if (i >= args.length || typeof args[i] !== 'function')
            return;
        window.setTimeout(function() {
            args[i]();
            chain(i + 1);
        }, 2000);
    })(0);}

用法：

loop(
  function() { alert("sam"); }, 
  function() { alert("sue"); });

显然，您可以修改此操作以获取可配置的等待时间，或立即执行第一个函数，或者在链false中apply的函数返回时或在指定上下文中的函数或您可能需要的任何其他函数时停止执行。