title: js Function queue
body: <p>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.</p>
  
  <p>What I've tried:</p>
  
  <pre><code>var drawQueue = [];
  function animate() {
      while (drawQueue.length !== 0) {
          drawQueue.shift()();
      }
      requestAnimationFrame(function () {
          animate();
      });
  }
  </code></pre>
  
  <p>With that I was trying to add things like:</p>
  
  <pre><code>drawQueue.push(drawthing(0,0,0,0));
  </code></pre>
  
  <p>this would just run the function and push undefined to the array, this does how work if you just do this:</p>
  
  <pre><code>drawQueue.push(function () {
      console.log("derp");
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>drawQueue.push(functionName); //with no args
  </code></pre>
  
  <p>The but problem here is that I need to pass arguments to most of the functions I'm calling.</p>
  
  <p>my Second attempt:</p>
  
  <pre><code>var drawQueue = [];
  function animate() {
      while (drawQueue.length !== 0) {
          var data = drawQueue.shift();
          Object.apply(data.func, data.args);
      }   
      requestAnimationFrame(function () {
          animate();
      }); 
  }
  </code></pre>
  
  <p>while adding function to the queue like:</p>
  
  <pre><code>drawQueue.push({func: functionName, args: [0,0,0,0]});
  </code></pre>
  
  <p>but I couldn't get that to work either, not 100% how to use Object.apply() and what exactly its doing...</p>
  
  <p>So my question is how do I go about making my function queue or is there a better way to do this?</p>