throttling, debouncing, setInterval and requestAnimationFrame

• setInterval + clearInterval
  • basically we can do setInterval(callback, t); or reall, window.setInterval(callback, t);
  • i think the way for me to think about this is setInterval is a method im calling on the window object
  • the method is already defined; im just invoking it
  • but if I do it like i did above, i cant stop the callback from running, because its anon
  • so i can do this: var x = window.setInterval(callback, t);
  • which is important cuz i can write clearInterval(x); to stop it

  setTimeout(callback, delay)

  function abc() {
    console.log('abc');
    setTimeout(function() {
      console.log('xyz');
    },1000)
  }
  
  abc();

  adding a delay to a loop

  delay to loop

  var i = 0, howManyTimes = 10;
  function f() {
      alert( "hi" );
      i++;
      if( i < howManyTimes ){
          setTimeout( f, 3000 );
      }
  }
  f();

  for (let i=1; i<10; i++) {
      setTimeout( function timer(){
          alert("hello world");
      }, i*3000 );
  }

  but how will i do it if i want the loop to run thru each process in the loop syncronously before starting the next element in the array being looped over?

  im thinking about my morse code program, because i have an array of dots and dashes that need to be looped over, each has a sound, but the sound file will not play if the previous sound file is still running. so i need to loop over the array, read an element, decide what file to play, if any, play the file, finish playing the file, then move to the next element.

Removing the animation-name applied to an element will make it jump or cut to its next state. If instead you'd like the animation to complete and then come to a stop you have to try a different approach. The main tricks are:

some event {
 
 el.classList.remove(animation); // kills the animation, and takes it to the next state
 
 window.setTimeout(function(e) {
  el.classList.add(animation); // add it back 1 ms after removing it, thus restarting the animation
 }, 1);

}