The setTimeout Function in Javascript
Tags: javascript, programming, coding, webdev
Published: 2023-08-16 21:31:22

Have you ever seen a text appear on a website and within sometime the text will disappear or maybe change it`s text values? Or maybe you must have heard of the setTimeout function in javascript but you have not yet understand it so well.

In this article, i will hold you by the hand (don`t worry i won`t arrest you 😉)  and explain what setTimeout function is in javascript with some examples. 

**Prerequisites You Will Need To Understand This Article**

- A basic understanding of HTML.

- A basic understanding of CSS.

- A basic understanding of Javascript.

- A code editor and a web browser (Chrome, Firefox etc).

**What is setTimeout function?**

The `setTimeout` function is a built-in feature of JavaScript that allows we developers to schedule the execution of a given function after a specified amount of time has elapsed.

This simply means, giving your siblings a task and tell them to carryout that task once it is 5 pm. That`s one of the most simplest explanation you can ever get and it`s relatable.

The`setTimeout` functions allows us to  execute a function after some delay.

**Syntax**
`setTimeout` function has a unique syntax, it is made up of two important parts; the function and the delay.

```
setTimeout(function, delay);
setTime(()=>{
// your code will be here
}, 2000) // it will run after 2 seconds of delay
```
The function will bear the code that will be executed after the delay. Now let`s talk about the delay part of the setTimeout function. The delay is set in milliseconds, so if you want your code to run after waiting for 2 seconds, your delay will look like this `2000`;

Now let me give you a practical example for you to understand better.
Imagine you have a button, and you want a situation whereby if a user clicks on that button, a text will appear above or below the button, and say "button clicked" and then disappears after sometime.
for you to achieve this easily, you can use the `setTimeout` function here.
How can you use the `setTimeout` function here? you will first of all have a p tag that will be either above or below the button. You will then use `document.getElementById() or you can use the document.querySeletor()` to select the p tag, once you select it, you can then set the `innerHTML` to "button clicked" when the button is clicked. Mind you, you will have to do all of this inside a function so that we can call that function when we click the button. Now inside the same function, we will then have our `setTimeout` and set the `innerHTML` of the p tag to an empty string like this " ".

I know that you might not understand this but let me demonstrate this with code for better understanding.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript setTimeout Function</title>
</head>
<body>
    <p id="ptag"></p>
    <button onclick="buttonFunction()">Click me</button>
 <script>
const buttonFunction=()=>{
 let message = document.getElementById("ptag").innerHTML = "button clicked";
 setTimeout(()=>{
 let message = document.getElementById("ptag").innerHTML = " ";
},2000)

 }
  
</script>
</body>
</html>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32r3ej2xha65d9ov0xve.gif)

I know by now you will be like, oh! this `setTimeout` function is this easy 😂😊, yes it is, you just have to understand the concept and implement it. So, go and build that application without any fear anymore.

**Conclusion**
`setTimeout` function is one of the important fundamentals that you need to understand in Javascript before you can be able to create super interactive web applications that solves problems in the society.
It is made up of two important parts; the function and the delay. The function carry the code that will be executed after the delay. The delay is set to milliseconds, it will delay the execution of the codes inside your function based on the time you give it.

If you have any questions, please drop it in the comment section, i will be glad to answer them. Happy coding 😊!