Javascript：如何实现异步函数队列（无需库）

我一直在搜索谷歌和SO，但由于某种原因我很难解决这个问题。只是强调一下，我不想加载像 JQuery 这样的库，因为我不需要它的大部分内容。当我could使用动画库，我已经构建了我自己需要的几个函数（其中一些甚至不是您在库中找到的标准动画），所以我不确定这些是否会有帮助。事实上，我可以轻松地将这个问题命名为“如何 - 异步函数队列”，因为它不是特定于动画的。

在我的搜索中，我遇到了 Promise 的想法，但这似乎比我需要的要多一些。

我得到了一般原则 - 你有一个使用 setInterval / setTimeout 的异步函数，并且在适当的条件下，你清除间隔（如果适用）并运行回调：

function callback() {
    alert('It was just a sales call... Now where were we?');
}
function anim() {
    var i = 0,
        interval = setInterval( function() {
            // do something with the current value of i
            if (i === 100) {
                clearInterval( interval );
                callback();
            }
            i++;
        }, 50);
}

当然，如果您通过将“回调”作为 anim() 的参数来使其可重用，那就更好了。然而，我真正想做的是：

var populateDialog = new Queue([
    {fn: anim, args: ['height','300px',1500]},
    {fn: type, args: [input.value, outputDiv]},
    {fn: highlight}
]);
populateDialog.start();

第一个函数将被调用，当它完成时，队列数组中的下一个项目将被调用。问题是，虽然队列本身可以轻松地按顺序调用函数，但它需要知道当前函数的状态何时为“完成”，然后才能继续。

我需要如何设计要添加到队列中的任何函数，以便它 a) 发布其状态（以及如何让队列检测到该状态？）或 b) 可以接受来自队列的回调？我猜测前者会涉及某种自定义事件系统，而后者会更容易，看起来像：

function name(callback, param1, param2, ... paramX) {
    // setTimeout or setInterval some stuff, then call the callback argument
}

其中回调始终是第一个参数，以便可以附加任意数量的其他参数。但就像我说的，我真的很难理解所有这些，所以彻底的解释/任何替代方案将不胜感激！

EDIT

我想出的队列可以在以下位置找到我的后续问题 https://stackoverflow.com/questions/18455550/.

我需要如何设计我想要添加到队列中的任何函数，以便它a）发布其状态（以及如何让队列检测到它？）我猜它会涉及某种自定义事件系统

Exactly.

这将是一个概念Promises http://wiki.commonjs.org/wiki/Promises- 您的动画函数返回一个对象，队列可以在该对象上附加“完成”侦听器。如果您不想使用其中之一很多很多图书馆 https://github.com/promises-aplus/promises-spec/blob/master/implementations.md，您还可以实现自己的系统（简单的 pub-once/sub-often 模式）。看一下Promise/Defer 库是如何实现的？ https://stackoverflow.com/questions/17718673/how-is-a-promise-defer-library-implemented（特别是first https://stackoverflow.com/revisions/17724387/1 two https://stackoverflow.com/revisions/17724387/2我的答案的修订）以获得一些灵感......

然后队列将像这样工作

var promise = queue[i].fn.apply(null, queue[i].args);
promise.then(function() {
    i++;
    // … "recurse"
});

b) 可以接受来自队列的回调吗？那会更容易，看起来像：function name(callback, param1, param2, ... paramX) {…}其中回调始终是第一个参数，以便可以附加任意数量的其他参数。

确切地。还是最后一个参数，这个比较常见。看看apply功能方法 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply用于调用具有动态数量参数的函数。

队列会是这样的

function step(i) {
    function callback() {
        step(i+1); // "recurse"
    }
    if (i < queue.length)
        queue[i].fn.apply(null, queue[i].args.concat(callback));
    // else: all done
}

但就像我说的，我真的很难理解所有这些，所以彻底的解释/任何替代方案将不胜感激！

好吧，你已经解决了——除了你概述的两种方法之外，没有其他选择。 Promise 方法更合理，对于动画函数的可变参数效果更好，而回调方法则更简单。