js Function queue

综合技术 2018-08-19 阅读原文

So essentially what I'm trying to do is have a queue of functions that I can add to. These functions are suppose to be drawing things to a canvas like in an requestAnimationFrame.

What I've tried:

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

With that I was trying to add things like:

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

this would just run the function and push undefined to the array, this does how work if you just do this:

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

or

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

The but problem here is that I need to pass arguments to most of the functions I'm calling.

my Second attempt:

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

while adding function to the queue like:

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

but I couldn't get that to work either, not 100% how to use Object.apply() and what exactly its doing...

So my question is how do I go about making my function queue or is there a better way to do this?

Problem courtesy of: dabarnes

Solution

You can't add something to the queue like this:

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

All that is doing is calling drawthing(0,0,0,0)
immediately and pushing the return result from executing the function into the queue.

Instead, you need to push an actual function into the queue like this:

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

If you want to just push the function and arguments into the queue separately like this:

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

Then, you can pull an item off the queue and execute it like this:

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

When you call function.apply(a, b)
, it sets the this
ptr to the first argument a
and then calls the function with whatever arguments are in the b
array.

Solution courtesy of: jfriend00

Discussion

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

And use an Object
for the arguments.

Discussion courtesy of: undefined

Some time ago I needed to do the same! Have a look here: https://github.com/alexandernst/jniftilities#functions-queue

It's a small library that will do exactly what you're looking for. Please see the comments/examples in that same link.

Discussion courtesy of: alexandernst

This recipe can be found in it's original form on Stack Over Flow
.

Node.js Recipes

责编内容by:Node.js Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

js学习日记-变量的坑 js变量细节是前端面试经常遇到的问题,可见其重要程度,要想掌握这个知识点,需注意以下几点: 变量提升 所谓变量提升,就是使用了var关键字申明的变量,会提升到所在作用域的顶部。es5的作用域分为全局作用域和函数作用域,es6(...
JavaScript运算符规则与隐式类型转换详解... 本文中涉及的参考资料全部声明在了JavaScript 数据结构学习与实践资料索引 。 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制;而...
《你不知道的 JavaScript 上卷》 学习笔记... 第一部分: 作用域和闭包 一、作用域 1. 作用域:存储并查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法分析:...
监听WebView页面上所有的图片 有两周没写简书了,有一丢丢懒惰了,还是要坚持下来啊 废话不多说,进入主题 需求 现在有一个类似聚合阅读的APP里面的文章都是以WebView来显示内容 用户点击文章中的图片会进入到查看图片的页面 问题 根据Andro...
基于 Generator 和 Iterator 的惰性列表 初识 Lazy List 如果有了解过 Haskell 的朋友,对下面的这些表达一定不陌生 repeat 1 -- => cycle "abc" -- => "abcabcabc..." -- => ...