javascript中的队列函数调用答案

【问题标题】：Queue function call in javascriptjavascript中的队列函数调用
【发布时间】：2014-07-21 07:48:33
【问题描述】：

我有包含定时动画的函数，我希望这些函数在前一个函数完成后一个接一个地运行。

function a() {
    var i = 0;
    var x = setInterval(function () {
        console.log('a' + i);
        if (i == 3) {
            console.log('Done @' + i);
            clearInterval(x);
            return true;
        }
        i++;
    }, 1000);
}

function b() {
    var c = 0;
    var y = setInterval(function () {
        console.log('b' + c);
        if (c == 1) {
            console.log('Done 2 @' + c);
            clearInterval(y);
            return true;
        }
        c++;
    }, 1000);
}

a().then(b());

我尝试了一个here，但它不起作用。这是fiddle。

我想要达到的效果是这样的：

a0

a1

a2

a3

Done @3

b0

b1

Done 2 @1

但它停在Done @3。我正在寻找任何其他方法来实现这一目标。

【问题讨论】：

a() 需要返回一个带有then 方法（承诺）的对象，您的代码才能正常工作。你的实现什么都不返回，所以then什么都不做，b()永远不会被调用。

标签： javascript queue

【解决方案1】：

如果你想调用then方法——函数必须返回promise，之后你不想立即调用b()而是传递对它的引用a().then(b);

function a() {
    var i = 0;
    var defer = $.Deferred();
    var x = setInterval(function () {
        console.log('a' + i);
        if (i == 3) {
            console.log('Done @' + i);
            clearInterval(x);
            defer.resolve('asdasd');
        }
        i++;
    }, 1000);
    return defer;
}

function b() {
    var c = 0;
    var y = setInterval(function () {
        console.log('b' + c);
        if (c == 1) {
            console.log('Done 2 @' + c);
            clearInterval(y);
            return true;
        }
        c++;
    }, 1000);
}
a().then(b);

jsfiddle：http://jsfiddle.net/Lungx/3/

【讨论】：

【解决方案2】：

两种更简单的方法通常应该有效，但可能不适用于您的情况。

(1) jQuery。如果您使用 jQuery animate() 函数，那么您可以在回调中为上一个动画设置每个动画。这样，当动画n 完成时，您的回调函数将启动n+1 的动画等。有一个讨论和几个例子here。

(2) 如果您正在为 CSS 设置动画（或真正的过渡），您可以将处理程序附加到 transitionend 事件。这样，与第一种方法类似，您可以在前一个 transitionend 事件触发后立即开始下一个转换。请参阅here，尤其是在标题“检测转换完成”下。

我以前使用过第一种方法，但我看不出第二种方法不起作用的任何原因。我希望这有帮助。让我知道它是否不起作用；我很好奇。

【讨论】：