title: Is it true that if possible I should never use setInterval & setTimeout?
body: <p>I am learning to code in JavaScript. I am programming something with some timed mouse animation. I'm just about to add some code which draws the mouse path.</p>
  
  <p>It's going to be something that takes the mousemove event, and every time the mouse moves draw a new line path on Canvas. And with time, that path is going to be more transparent until it disappears. Of course, new paths are always going to be opaque so there's a continuous movement.</p>
  
  <p>I figured out a way I can do this with just requestanimationframe. Basically every time a new mousemove event occurs, I will add that mouse path coordinates to an array of objects called mousePathArray. The object will carry the path coordinates and an "animationStage" counter. This counter will basically determine how transparent the path will be at that stage of the 'animation'. (Later stages will mean more transparent.)</p>
  
  <p>Then every animation frame I will call a function that will go through all the objects in the array and draw the lines according to their coordinates and animationStage counter, will increase the counter by 1 and will remove the array objects if the animationStage counter reaches the end number (which could be 50 or something).</p>
  
  <p>This can all be done, but it sounds like instead of all of that, it would be much easier to do by just introducing a setInterval function that will be called with a set interval every time the mouse moves.</p>
  
  <p>So is it worth it doing the long way? Would it be faster or maybe just be better JS practice to not use setInterval and rAF together? </p>
  
  <p>After writing all this down I actually wrote the rAF-only code that I talked about above. It's too long to paste here but the rules need it. Here it is on jsfiddle: <a href="http://jsfiddle.net/06f7zefn/2/" rel="noreferrer">http://jsfiddle.net/06f7zefn/2/</a></p>
  
  <p>(I'm aware there are a lot of inefficiencies and probably terrible coding practice but bear with me, I'm 5 days old in this! I could make an isDrawing? boolean instead of calling animate() on every frame, and I can just do ctx.moveTo() once with the rest being LineTo() without having to to moveTo() every iteration since one point originates from where the other left off)</p>
  
  <p>If I could get across the main idea I'm talking about, that is where I am asking for your opinion. Instead of making everything related to timing originate from the rAF call could it be better to use setInterval or setTimeout here instead?</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  
  var ctx = canvas.getContext('2d');
  
  var currentPosX, currentPosY, prevPosX, prevPosY;
  var mousePathArray = [];
  
  canvas.addEventListener ('mousemove', mouseOp);
  
  
  function mouseOp (mouseEvent) {
      prevPosX = currentPosX;
      prevPosY = currentPosY;
      currentPosX = mouseEvent.clientX;
      currentPosY = mouseEvent.clientY;
      mousePathArray.push( {
          x1: currentPosX,
          x2: prevPosX,
          y1: currentPosY,
          y2: prevPosY,
          animStage: 0
      });
  }
  
  function animate () {
      var anims = mousePathArray.length;
      if (anims!=0) {
          for (i=0; i&lt;anims; i++) {
              if (mousePathArray[i].animStage == 20) {
                  mousePathArray.splice(i, 1);
                  i--;
                  anims--;
                  continue;
              }
  
              drawLine(mousePathArray[i].x1, mousePathArray[i].x2, mousePathArray[i].y1, mousePathArray[i].y2, 1 - (mousePathArray[i].animStage * 0.05));
              mousePathArray[i].animStage ++;
          }
      }
  }
  
  function drawLine (x1, x2, y1, y2, alpha) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.strokeStyle = "rgba(150, 20, 150," + alpha +")";
      ctx.stroke();
  }
  
  animloop();
  
  function animloop(){
    window.requestAnimationFrame(animloop);
    gameLoop();
  }
  
  function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      animate();
  }
  </code></pre>