Updated April 3, 2023
Introduction to setTimeout TypeScript
The setTimeout TypeScript is defined as a method used in the TypeScript programming language. Before we know the usability of the function, it is important to know that TypeScript is an open-source language which is built on top of JavaScript and adds in static type definitions. TypeScript allows a methodology to generate types and is mostly used for designing large applications, and it gets transcompiled into JavaScript. Transcompilation is a source code conversion from one language to another language and is more of a source to source compiler. Now with all this information, we can fairly assume that an existing JavaScript code is a TypeScript code. Because of the Transcompilation feature, setTimeout is one of the functions for JavaScript that enables the scheduling and execution of a function.
Syntax of setTimeout TypeScript
Given below is the syntax mentioned:
1. Declaration of settimeout function.
setTimeout(< Function or code >, < delay in ms >, [argument 1], [argument 2], ...)Here, argument 1, argument 2 … are the string arguments that will be passed on to the functions as their arguments to be executed completely.
2. Assigning the timeout to a variable.
let timer = setTimeout(< Function or code >, < delay in ms >, [argument 1], [argument 2], ...)3. Cancelling the execution of settimeout.
clearTimeout(< variable of the timer variable of settimeout >)4. Alert function in JavaScript.
alert(< Message to be written in the alert box >)5. Beware: NOT the correct settimeout call.
setTimeout(< Function followed by ( ) >, < delay in ms >, [argument 1], [argument 2], ...)A lot generally writes this statement of novice developers, and hence this syntax finds its place in this list so as to make developers aware of what is right and what is wrong.
How setTimeout Works in TypeScript?
- From the introduction, we got to know that settimeout is a function that is a part of JavaScript, and since typescript is like a wrapper over JavaScript, the function settimeout written in typescript will automatically be transcompiled into JavaScript and hence be compiled by referencing it with the settimeout function in the JavaScript itself. This function allows a JavaScript code to run at a point in time in future, and it is more like “scheduling a call”. One can resonate it to an alarm that is scheduled to remind one of a task. This task is like a one-off task and needs to be reminded only once. One example of the same is like a meeting request in our outlook calendars, and then an alarm comes up for the meeting, and once the meeting is over, the notification doesn’t come up as the meeting is now removed from the calendar. In this case, we see that the meeting is not a recurrence meeting, and hence the notification goes away after the meeting.
- The function of code specified in the settimeout runs itself after a specified number of milliseconds from the execution of the settimeout command. This specified number of milliseconds is passed as an argument to the settimeout function. From the syntax in the earlier section, we see that the settimeout function primarily takes in 2 arguments. The first one is the function or the code, which is a JavaScript expression that needs to run after the value the 2nd parameter has stored has elapsed. This parameter is passed to the settimeout function, and this parameter is in milliseconds. Now to understand the flow of work, we will assume that there is an “execute” button click (example of which will be portrayed in the next section), which will activate the execution of the settimeout command. Next, when the settimeout command is executed, it will look for 2 necessary arguments: the function that will be executed exactly after the value of the second arguments in milliseconds. In other words, after the time duration (value of the second argument) is elapses, the function passed as the first argument is executed. One thing to note is that the execution of the subsequent lines of codes in the script doesn’t stop when the code is in the timeout period and can be thought about as a scheduler which has just scheduled the running of a set of codes for some time later and proceeds with the next set lines of codes.
- Just for extra information, another function known as setInterval allows the running of a set of lines of codes or function repeatedly until the command is explicitly asked to Stop.
Examples of setTimeout TypeScript
Given below are the examples of setTimeout TypeScript:
Example #1
Waiting for 3 s to execute a function without argument.
Syntax:
function HelloWorld() {
alert('Hello to the world of EduCBA');
}
console.log("1. Start of the code; Will execute the timeout");
setTimeout(HelloWorld, 3000);
console.log("Before the pop-up this log will be displayed");Output:
When we run the following code, the second log is displayed even before the pop-up comes; as we mentioned in our explanation that the execution doesn’t stop. Thus, after exactly 3 seconds post the execution of the first log statement, the pop-up at the top will appear.
Example #2
Waiting for 1 s to execute a function with arguments.
Syntax:
function HelloWorld(msg: string, website: string) {
alert(msg + '@' + website);
}
console.log("1. Start of the code; Will execute the timeout");
setTimeout(HelloWorld, 1000, 'Welcome to EduCBA', 'www.educba.com');
console.log("Before the pop-up this log will be displayed");Output:
We see that the 2 arguments passed after the function name and the timeout seconds are passe to the function, and then necessary treatment is done and finally printed in the pop-up.
Example #3
Deliberate error upon execution of a script by passing the function name with ( ).
Syntax:
function HelloWorld() {
alert("Welcome all to EduCBA");
}
console.log("1. Start of the code; Will execute the timeout");
setTimeout(HelloWorld(), 1000);
console.log("Before the pop-up this log will be displayed");Output:
Conclusion
In this article, we looked at all the various varieties of function passes through the settimeout function, one without the parameter, one with the parameters and finally, one which many beginner-level developers make the mistake of having a complete picture of the function.
Recommended Articles
We hope that this EDUCBA information on “setTimeout TypeScript” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
