jQuery setInterval () & setTimeout (milliseconds) function

How to use set an interval time using jQuery setTimeout(seconds) & setInterval(seconds) methods. We are going to show how to use this method with example from scratch.

When you work with jQuery, You must know that some of the basic jQuery function. It function very helpful for web development. With the help of jQuery functions, we create dynamic web pages and also use diffrent diffrent types of jQuery animation in web pages for make it very interactive.

Let’s see Interval time methods

  • setTimeout
  • setInterval

About jQuery setTimeout Method

The setTimeout function executes a script code after a specified delay (in milliseconds).

Syntax of jQuery setTimeout Method

setTimeout(function, milliseconds);

Example of setTimeout method

This example will demostrate you how use this setTimeout function.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
$(document).ready(function(){
    $("#btn-timout").click(function(){
       setTimeout("alert('Hello World!');", 4000);
    });
});
</script>
</head>
<body>
<div class="common_box_body">
<button id="btn-timout">Click</button>
<p>Click the above given button and wait for 4 seconds. After 4 second will come alert box</p>
</div>
</body>
</html>

Output

Click the above given button and wait for 4 seconds. After 4 second will come alert box

About jQuery setInterval Method

The jQuery setInterval function can be used to continue any work by using a regular time-based trigger.

Syntax of setInterval Method

setInterval(function, milliseconds);

Example of setInterval method

This example will demostrate you how use this setInterval function.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
$(document).ready(function(){
    $("#btn-interval").click(function(){
       setInterval("alert('Hello World!');", 4000);
    });
});
</script>
</head>
<body>
<div class="common_box_body">
<button id="btn-interval">Click</button>
<p>Click the above given button and wait for 4 seconds. After 4 second will come alert box continuously</p>
</div>
</body>
</html>

Output

Click the above given button and wait for 4 seconds. After 4 second will come alert box continuously

To Remember

The setInterval function performs again and again in the given interval time.
The setTimeout function is executed only once in given intervals time. In both functions, 1000 ms = 1 seconds.
Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *