javascript中的队列函数调用

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

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

我试过一个，但不起作用。这是我的建议

我想要实现的是：

a0

a1

a2

a3

Done@3

b0

b1

Done 2@1

---

但它在

Done@3

处停止。我正在寻找其他方法来实现这一点。

两种简单的方法通常都会奏效，但在您的情况下可能不会

（1） jQuery。如果使用jQuery

animate（）

函数，则可以在回调中为上一个动画设置每个动画。这样，当动画

n

完成时，回调函数将启动

n+1

等的动画。这里有一个讨论和几个示例

（2） 如果您正在为CSS制作动画（实际上是转换），可以将处理程序附加到

transitionend

事件。这样，与第一种方法类似，您可以在触发上一个

transitionend

事件后立即开始下一个转换。请参阅，尤其是标题“检测转换的完成”

---

我以前使用过第一种方法，我看不出第二种方法不起作用的任何原因。我希望这有帮助。如果它不起作用，请告诉我；我很好奇

如果您想调用

，那么

方法–函数必须返回promise，之后您不想立即调用

b（）

，而是传递对它的引用

a（）。然后（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);

jsiddle:
a（）
需要使用
返回一个对象，然后使用
方法（承诺）才能使代码正常工作。您的实现不返回任何内容，因此
然后
不执行任何操作，并且永远不会调用
b（）
。