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

你不能像这样添加一些东西：

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

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

这是一个小型图书馆，可以完全满足您的需求。请参阅相同链接中的评论/示例。

Answer 3

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

并使用Object作为参数。

js函数队列

3 个答案: