In this blog post you’ll learn the JavaScript method that executes the function of a task or code after a given milliseconds The setTimeout() method.
clearTimeout() Method.
Syntax:
JavaScript
setTimeout(function (parameter, parameter) {
// code
}, milliseconds);
- function required. You can call or declare the function inside setTimeout method.
- function Parameter optional.
- milliseconds required. (its in milliseconds). If you want to add 1 second then you have to add 1000.
You can also write like this:
JavaScript
setInterval(myfunction, 3000);
function myfunction() {
document.write("Hello welcome to maketechstuff.com");
}
JavaScript
setTimeout(() => {
}, milliseconds);
Description:
setTimeout() method is used to call or execute the function or given code after defined milliseconds (delay). For example, If you want to execute the code after five seconds you can write 5000 milliseconds to execute the code after 5 seconds.
It executes the code which is given inside only once.
Example:
Print the text after 5 seconds.
JavaScript
setTimeout(function () {
// Text will display after 5 seconds.
document.write("Welcome to maketechstuff.com");
}, 5000);
JavaScript
// Arrow function.
setTimeout(() => {
// Text will display after 5 seconds.
document.write("Welcome to maketechstuff.com");
}, 5000);
JavaScript
setInterval(myfunction, 5000);
function myfunction() {
document.write("Hello welcome to maketechstuff.com");
}
To stop the setTimeout method. We'll use clearTimeout method.
clearTimeout().
To stop the setTimeout method from being executed you can use another javascript method which is clearTimeout().
Syntax:
JavaScript
clearTimeout(mytimeout); Here, mytimeout is a variable in which the setTimeout method is stored. So to stop the setTimeout method, you just have to add the variable name inside the clearTimeout method.
Store the setTimeout method inside the variable. Then add that variable name inside the clearTimeout() method (like this clearTimeout(variable name)).
Example 1:
JavaScript
let mytimeout = setTimeout(() => {
// Text display after two seconds.
document.write("Welcome to maketechstuff.com");
}, 2000);
// To stop the execution of the setTimeout() method which is store in side the variable "mytimeout".
// Remove this line to execute the setTimeout.
clearTimeout(mytimeout); Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<title>clearTimeout Method | Maketechstuff.com</title>
</head>
<body>
<p>click on button to stop the text from being appear within 5 seconds OR do nothing to see the text within 5 seconds of code run.</p>
<button type="button" class="button">click here</button>
<p class="text"></p>
</body>
<script>
let button = document.querySelector(".button");
let text = document.querySelector(".text");
button.onclick = function () {
clearTimeout(timeout);
text.innerHTML = "You have succesfully stopped the text from being appear.";
}
let timeout = setTimeout(() => {
text.innerHTML = "<b>Hello welcome to maketechstuff.com</b>";
}, 5000);
</script>
</html>
Refere clearTimeout() for more example.
Blog posts in which I've used the setTimeout Method for various tasks:
- Create cursor tail using JavaScript.
- Generate the colorfull balloons or balls on click on document using JavaScript.
- Select and unselect all checkboxes one by one with animation using JavaScript.
- Create the color matching game using JavaScript. Click the same color balloon as show by game.
So that's it for the setTimeout() method. Its use to run or execute the code after a given milliseconds or use to execute the code after some delay.
Share your thoughts.