The growth of the web development field is getting significantly rapid. Any technology released today might become outdated just in a few months. Before, the features of the website tend to be static without or just limited animation and CSS.

However, when JavaScript was introduced, it brought out a complete revolution in the interface and function of websites. Though, it is not surprising that the users quickly got bored and expected something more innovative. That was when Angular joined the market and innovated the operation of the websites.

In this blog, we would like to introduce to you the function setTimeout() in Angular. Explore the details below for amazing explanations and tutorials.

1. Introduction of the Function SetTimeout() in Angular

The function setTimeout() origins from a JavaScript function used for calling a function or implementing a snippet of code after a certain number of milliseconds.  The following code snippet is SetTimeout() Syntax:

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

• timeoutID: This is an ID in number format used for canceling timer with clearTimeout.
• Scope indicates the interface of Window or WorkerGlobalScope.
• The function is the one to be conducted after the timeout. 
• Code is a replacing syntax that permits you to contain a string rather than a function. You can comply and execute the code after the timeout. 
• delay refers to the millisecond’s number by which the call function should be delayed. This would be 0 in default if it is omitted. 
• arg1,.., and argN are alternative arguments that are passed to the specified function by function. 

2. The Function SetTimeout() In Angular Using Recursive Functions and IIE

This function can be used for different reasons. It is suggested to permit Angular to run the detection of change once, among actions that you might otherwise conduct synchronously.

You can refer to the simple example of the function setTimeout() below:

let i = 0;
let max = 5;

(function repeat(){
  if (++i > 5) return;
  setTimeout(function(){
    console.log("waited for: " + i + " seconds");
    repeat();
  }, 1000);
})();

In the code demonstration above, an integer (i, max) was defined and a function repeat was used for repeating the timeout till the condition can be responded to.

If the i value is greater than the max value, this loop might get broken. If the i value remains lower than max, it would repeat after every 1s then wait from 1s to 5s to print.

3. The Function SetTimeout() In Angular By Passing Values List

If you expect a program for waiting and executing the function callback for a value list, an array can be passed as the parameter by setting a function and running till the completion of the array.

let waitList = [5000, 4000, 3000, 1000];

function setDelay(times) {
  if (times.length > 0) {
    // Remove the first time from the array
    let wait = times.shift();
    console.log("Waiting For: " + wait/1000 + " seconds");

    // Wait for the given amount of time
    setTimeout(() => {
        console.log("Waited For: " + wait/1000 + " seconds");

        // Call the setDelay function again with the remaining times
        setDelay(times);
    }, wait);
  }
}

setDelay(waitList);

The Bottom Line

Through this blog, you have introduced how to use the function setTimeout() in Angular with recursive functions and IIE as well as passing values list. Also, the coding examples above are not too difficult, aren’t they?  Hoping that all the knowledge explained in this post would be useful for you. If you have further queries about the Angular platform or another programming language, you can explore this website for more deep understanding.