Updated April 4, 2023
Introduction to Settimeout jQuery
jQuery is a library of JavaScript which was designed for simplifying HTML DOM tree traversal and Css animation, Ajax, event handling and manipulation. jQuery is an open-source and free software which uses the MIT License. jQuery is also one of the most used JavaScript library and leads the race by three to four-time to any other JavaScript Library. Set timeout is used for delaying actions in jQuery. It generally calls a function or expression after a specified time interval. This can be used if the code needs a part of cade to be run after a particular interval of time only once. This article explains the set timeout concept of jQuery with multiple examples and their explanations.
Syntax of Settimeout jQuery
Settimeout jQuery Syntaxes are given below:
- Type 1
setTimeout(popUP, 2000);- Type 2
setTimeout(function(){ a.value="0 seconds" }, 10000);- Type 3
setTimeout(function(){ Popup.close() }, 5000);- Type 4
t = setTimeout(discountCount, 1000);Examples and Working of Settimeout jQuery
Set timeout function can be used as settimeout(). Generally, it is used to execute a certain block of code, expression or function after a particular time interval. Moreover, the settimeout() function calls the another function only once after the specified time. After the time gets elapsed, then the function won’t call the required function. If we write the code as setTimeout(fn,0) then the code will be executed as soon as the stack gets empty but not immediately. If the code setTimeout(fn, 0) is executed then after running a loop from 1 to 10 billion the callback gets executed after some seconds.
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="Training()">Click Me Bro! And Wait</button>
<p>**Let's see some Pop-up Magic**</p>
<script>
var EDUCBA;
function Training() {
EDUCBA = setTimeout(popUP, 2000);
}
function popUP() {
alert(" Lets take a ride to our website. \n www.educba.com \n We have started with text series as well");
}
</script>
</body>
</html>Output:
- On executing Code –
- On Clicking “Click Me Bro! And Wait” button –
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="Lefttime()"> Hurry!!... Tick - Tok - Tick - Tok </button>
<input type="text" id="content">
<p> Time left to avail the great deals and offers on EDUCBA courses and training programs </p>
<script>
function Lefttime() {
var a = document.getElementById("content");
setTimeout(function(){ a.value="0 seconds" }, 10000);
setTimeout(function(){ a.value="1 seconds" }, 9000);
setTimeout(function(){ a.value="2 seconds" }, 8000);
setTimeout(function(){ a.value="3 seconds" }, 7000);
setTimeout(function(){ a.value="4 seconds" }, 6000);
setTimeout(function(){ a.value="5 seconds" }, 5000);
setTimeout(function(){ a.value="6 seconds" }, 4000);
setTimeout(function(){ a.value="7 seconds" }, 3000);
setTimeout(function(){ a.value="8 seconds" }, 2000);
setTimeout(function(){ a.value="9 seconds" }, 1000);
setTimeout(function(){ a.value="10 seconds" }, 0000);
}
</script>
</body>
</html>Output:
- On code execution –
- On Clicking “Hurry!!… Tick – Tok – Tick – Tok” Button –
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="Lefttime()"> Hurry!!... Tick - Tok - Tick - Tok </button>
<input type="text" id="content">
<p> Time left to avail the great deals and offers on EDUCBA courses and training programs </p>
<p> This window to your future career path will close in 10 seconds. So, hurrrryyyuppp!! </p>
<button onclick="Window()">Open "Pop-up"</button>
<script>
function Window() {
var Popup = window.open("", "Popup", "width=400, height=200");
Popup.document.write("<p>This window to your future career path will close in 10 seconds. So, hurrrryyyuppp!! </p>");
setTimeout(function(){ Popup.close() }, 5000);
var a = document.getElementById("content");
setTimeout(function(){ a.value="0 seconds" }, 10000);
setTimeout(function(){ a.value="1 seconds" }, 9000);
setTimeout(function(){ a.value="2 seconds" }, 8000);
setTimeout(function(){ a.value="3 seconds" }, 7000);
setTimeout(function(){ a.value="4 seconds" }, 6000);
setTimeout(function(){ a.value="5 seconds" }, 5000);
setTimeout(function(){ a.value="6 seconds" }, 4000);
setTimeout(function(){ a.value="7 seconds" }, 3000);
setTimeout(function(){ a.value="8 seconds" }, 2000);
setTimeout(function(){ a.value="9 seconds" }, 1000);
setTimeout(function(){ a.value="10 seconds" }, 0000);
}
</script>
</body>
</html>Output:
- On code execution –
- On Clicking “Open Pop-up” button –
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="Training()">Click Me Bro! And Wait</button>
<p>**Let's see some Pop-up Magic**</p>
<button onclick="noMagic()">Not interested in magic</button>
<p>You should stop magic to happen.... By Clicking the above button... before it happens in 2 seconds after clicking "Click Me Bro! And Wait button.....
</p>
<script>
var EDUCBA;
function noMagic() {
clearTimeout(EDUCBA);
}
function Training() {
EDUCBA = setTimeout(popUP, 2000);
}
function popUP() {
alert(" Lets take a ride to our website. \n www.educba.com \n We have started with text series as well");
}
</script>
</body>
</html>Output:
- On code execution –
- On Clicking “Click Me Bro! And Wait” button –
- On Clicking “Not interested in magic” button within 2 seconds of clicking “Click Me Bro! And Wait” button –
Example #5
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="Lefttime()"> Hurry!!... Tick - Tok - Tick - Tok </button>
<input type="text" id="content">
<p> Time left to avail the great deals and offers on EDUCBA courses and training programs </p>
<p> This window to your future career path will close in 10 seconds. So, hurrrryyyuppp!! </p>
<button onclick="Window()">Open "Pop-up"</button>
<button onclick="startTimer()">Time Spent!</button>
<input type="text" id="time">
<button onclick="stopTimer()">Time Stop!</button>
<p>
More Time you send on our website...
</p>
<p>
More discounts can be availed...
</p>
<p>
You just have to be patient...
</p>
<script>
var n = 0;
var x;
var discount = 0;
function discountCount() {
document.getElementById("time").value = n;
n = n + 10;
t = setTimeout(discountCount, 1000);
}
function startTimer() {
if (!discount) {
discount = 1;
discountCount();
}
}
function stopTimer() {
clearTimeout(x);
discount = 0;
}
function Window() {
var Popup = window.open("", "Popup", "width=400, height=200");
Popup.document.write("<p>This window to your future career path will close in 10 seconds. So, hurrrryyyuppp!! </p>");
setTimeout(function(){ Popup.close() }, 5000);
var a = document.getElementById("content");
setTimeout(function(){ a.value="0 seconds" }, 10000);
setTimeout(function(){ a.value="1 seconds" }, 9000);
setTimeout(function(){ a.value="2 seconds" }, 8000);
setTimeout(function(){ a.value="3 seconds" }, 7000);
setTimeout(function(){ a.value="4 seconds" }, 6000);
setTimeout(function(){ a.value="5 seconds" }, 5000);
setTimeout(function(){ a.value="6 seconds" }, 4000);
setTimeout(function(){ a.value="7 seconds" }, 3000);
setTimeout(function(){ a.value="8 seconds" }, 2000);
setTimeout(function(){ a.value="9 seconds" }, 1000);
setTimeout(function(){ a.value="10 seconds" }, 0000);
}
</script>
</body>
</html>Output:
- On Code Execution –
- On Clicking “Open Pop-up” button –
- On Clicking “Time Spent” button –
- On Clicking “Time Stop” button –
Conclusion
On the basis of the above article, we understood the concept of set timeout in jQuery. We understood how set timeout works in jQuery through the different examples explained along with set timeout’s working. This article would help beginners in understanding set timeout in jQuery.
Recommended Articles
This is a guide to Settimeout jQuery. Here we also discuss the Syntax of Settimeout jQuery along with different examples and its code implementation. You may also have a look at the following articles to learn more –
