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 (dont worry i wont 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. Thats one of the most simplest explanation you can ever get and its relatable.
ThesetTimeout 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 lets 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>
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 😊!
Top comments (0)