JS功能队列

Question

从本质上讲，我要做的就是有一个可以添加到的函数队列。这些功能应该像在RequestAnimationFrame中一样将东西绘制到画布上。

我尝试了什么：

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

我试图添加以下内容：

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

这只会运行功能并将未定义推向数组，如果您这样做，这是如何工作的：

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

您不能在这样的队列中添加一些东西：

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 2

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

并将Object用于参数。

Answer 3

不久前我需要做同样的事情！在这里看看：https：//github.com/alexandernst/jniftiilities#functions-queue

这是一个小图书馆，可以正是您想要的。请参阅同一链接中的评论/示例。