Scheduling: setTimeout and setInterval - JavaScript.info

Javascript Animation - JavaScript.info

Using_the_Web_Animations_API - MDN

Web_Animations_API - MDN

Javascript Animation: Tutorial, Part 1 -schillmania.com

animejs.com

setInterval fires again and again in intervals, while setTimeout only fires once.setTimeout(): It is a function that execute a JavaScript statement AFTER x interval.setTimeout(function () { something(); }, 1000); // Execute something() 1 second later

setTimeout(function () {
    something();
}, 1000); // Execute something() 1 second later.

setInterval(function () {
    somethingElse();
}, 2000); // Execute somethingElse() every 2 seconds.

What does setTimeout return?

var timerId = setTimeout(function(){},1);

It will return a number 2020345. Each time is different. It's a handle (a unique identifier). When you create a timeout, the JavaScript runtime associates a handle with the timeout you created, and it can identify that timeout by the handle setTimeout() returns. When you run clearTimeout(), it will know what timeout you're talking about by looking at the unique handle you pass in.

• Methods setInterval(func, delay, ...args) and setTimeout(func, delay, ...args) allow to run the func regularly/once after delay milliseconds.
• To cancel the execution, we should call clearInterval/clearTimeout with the value returned by setInterval/setTimeout.
• Nested setTimeout calls is a more flexible alternative to setInterval. Also they can guarantee the minimal time between the executions.
• Zero-timeout scheduling setTimeout(...,0) is used to schedule the call “as soon as possible, but after the current code is complete”.

Javacript Automatic Counter

Counter: 0

Click to see the counter change

<h1>Counter:  <span id="showNo">0</span></h1>
	
<button onclick="printNumber(1,50)">Click to see the counter change</button>
	
  <script>
    'use strict';
    function printNumbers(from, to) {
      let current = from;
    
      let timerId = setInterval(function() {
        //alert(current);
        var showNo = document.querySelector('#showNo');
        showNo.textContent = current;

        if (current == to) {
          clearInterval(timerId);
        }
        current++;
      }, 100);
    }
    
    // usage:
   // printNumbers(1 , 50);
  </script>

Using recursive setTimeout:

function printNumbers(from, to) {
  let current = from;

  setTimeout(function go() {
    alert(current);
    if (current < to) {
      setTimeout(go, 1000);
    }
    current++;
  }, 1000);
}

// usage:
printNumbers(5, 10);

var alarm = {
  remind: function(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup: function() {
    if (typeof this.timeoutID === 'number') {
      this.cancel();
    }

    this.timeoutID = window.setTimeout(function(msg) {
      this.remind(msg);
    }.bind(this), 1000, 'Wake up!');
  },

  cancel: function() {
    window.clearTimeout(this.timeoutID);
  }
};
window.onclick = function() { alarm.setup(); };