setTimeout vs. setInterval

1. The setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using WindowOrWorkerGlobalScope.clearInterval().

2. If you wish to have your function called once after the specified delay, use WindowOrWorkerGlobalScope.setTimeout().

To call a function repeatedly (e.g., every N milliseconds), consider using setInterval().

 

3. It may be helpful to be aware that setTimeout() and setInterval() share the same pool of IDs, and that clearTimeout() and clearInterval() can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.

 

4. It is guaranteed that a timeout ID will never be reused by a subsequent call to setTimeout() or setInterval() on the same object (a window or a worker). However, different objects use separate pools of IDs.

---

 

WindowOrWorkerGlobalScope.setTimeout()

1. method of the WindowOrWorkerGlobalScope mixin (and successor to Window.setTimeout())

2. sets a timer which executes a function or specified piece of code once the timer expires.

 

Syntax

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

function	A function to be executed after the timer expires.
code	An alternative syntax that allows you to include a string instead of a function - which is compiled and executed when the timer expires. - This syntax is not recommended for the same reasons that make using eval() a security risk.
delay [optional]	The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed.  If this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle. Note that in either case, the actual delay may be longer than intended; see Reasons for delays longer than specified below.
arg1, ..., argN	Additional arguments which are passed through to the function specified by function.

 

Return

The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

 

---

WindowOrWorkerGlobalScope.setInterval()

 

1. The setInterval() method

2. This method is defined by the WindowOrWorkerGlobalScope mixin.

3. offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

4. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval(). 

 

Syntax

var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = scope.setInterval(code, [delay]);

func	A function to be executed every delay milliseconds.  - The function is not passed any arguments, and no return value is expected.
code	An optional syntax allows you to include a string instead of a function - which is compiled and executed every delay milliseconds. - This syntax is not recommended for the same reasons that make using eval() a security risk.
delay [option]	The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. See Delay restrictions below for details on the permitted range of delay values.
arg1, ..., argN [option]	Additional arguments which are passed through to the function specified by func once the timer expires.

 

Return

The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval().

- this value can be passed to WindowOrWorkerGlobalScope.clearInterval() to cancel the timeout.

The delay argument is converted to a signed 32-bit integer. This effectively limits delay to 2147483647 ms, since it's specified as a signed integer in the IDL.

 

 

Delay restrictions

It's possible for intervals to be nested. 

: the callback for setInterval() can in turn call setInterval() to start another interval running, even though the first one is still going.

: To mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval. Attempts to specify a value less than 4 ms in deeply-nested calls to setInterval() will be pinned to 4 ms.
: Browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common.

: Note also that the actual amount of time that elapses between calls to the callback may be longer than the given delay.

 

Ensure that execution duration is shorter than interval frequency

: If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using setTimeout().

 

For example, if using setInterval() to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.

In these cases, a recursive setTimeout() pattern is preferred:

(function loop(){
   setTimeout(function() {
      // Your logic here

      loop();
  }, delay);
})();

In the above snippet, a named function loop() is declared and is immediately executed. 

loop() is recursively called inside setTimeout() after the logic has completed executing. 
While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recurring.

 

---

Reasons for setTimeout()/setInterval() delays longer than specified

 

 

---

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrworkerGlobalScope/setInterval

https://www.sitepoint.com/delay-sleep-pause-wait/