js函数队列

Question

所以基本上我想要做的是有一个我可以添加到的函数队列。假设这些函数像在 requestAnimationFrame 中一样将内容绘制到画布上。

我尝试过的：

var drawQueue = [];
function animate() {
    while (drawQueue.length !== 0) {
        drawQueue.shift()();
    }
    requestAnimationFrame(function () {
        animate();
    });
}

我试图添加以下内容：

drawQueue.push(drawthing(0,0,0,0));

这只会运行函数并将 undefined 推送到数组，如果你这样做，它会如何工作：

drawQueue.push(function () {
    console.log("derp");
});

或

drawQueue.push(functionName); //with no args

这里的问题是我需要将参数传递给我正在调用的大多数函数。

我的第二次尝试：

var drawQueue = [];
function animate() {
    while (drawQueue.length !== 0) {
        var data = drawQueue.shift();
        Object.apply(data.func, data.args);
    }   
    requestAnimationFrame(function () {
        animate();
    }); 
}

同时向队列中添加函数时：

drawQueue.push({func: functionName, args: [0,0,0,0]});

但我也无法让它工作，不是 100% 如何使用 Object.apply() 以及它到底在做什么......

所以我的问题是如何让我的函数队列或者有更好的方法来做到这一点？

Answer 1

前段时间我也需要这样做！看看这里：https://github.com/alexandernst/jniftilities#functions-queue

这是一个小型库，可以完全满足您的需求。请查看同一链接中的 cmets/示例。

Answer 2

你不能像这样向队列中添加一些东西：

drawQueue.push(drawthing(0,0,0,0));

所做的只是立即调用drawthing(0,0,0,0)并将执行函数的返回结果推入队列。

---

相反，您需要像这样将实际函数推送到队列中：

drawQueue.push(function() {drawthing(0,0,0,0)});

---

如果您只想像这样将函数和参数分别推送到队列中：

drawQueue.push({func: functionName, args: [0,0,0,0]});

然后，您可以从队列中拉出一个项目并像这样执行它：

var item = drawQueue.shift();
item.func.apply(this, item.args);

当您调用function.apply(a, b) 时，它会将this ptr 设置为第一个参数a，然后使用b 数组中的任何参数调用该函数。

Answer 3

while (drawQueue.length !== 0) { var data = drawQueue.shift(); data.func(data.args); }

并使用Object 作为参数。