The jQuery setInterval function allows to call a function to execute in a set time delay in milli-seconds. With the use of jQuery setInterval function, many interesting animation or repeated jobs can be accomplished easily.
There are some ways in using the jQuery setInterval function. Let’s discuss them one by one.
The first method is shown as below:
<head>
<title>jQuery Using SetInterval Function 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.random.js"></script>
<script type="text/javascript">
jQuery("document").ready(function() {
function generateRandomNumber() {
// Generate a random number between 10 and 60
// Here I used a plugin - jquery.random.js
var ranNum = $.randomBetween(10, 60);
// Display number on text field
jQuery(".outputText").text(ranNum);
}
// Execute the function in set interval (milli-seconds)
setInterval(generateRandomNumber, 5000);
});
</script>
</head>
<body>
<h2>jQuery Using SetInterval Function 1</h2>
The random number is: <span>Random Numbers...</span>
</body>
</html>
Demo:
jQuery Example File:
The above jQuery setInterval function is working fine if the codes will be executed continuously.
Take a look at the second method:
<head>
<title>jQuery Using SetInterval Function 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.random.js"></script>
<script type="text/javascript">
jQuery("document").ready(function() {
function generateRandomNumber() {
// Generate a random number between 10 and 60
// Here I used a plugin - jquery.random.js
var ranNum = $.randomBetween(10, 60);
if (ranNum > 19) {
// Display number on text field
jQuery(".outputText").text(ranNum);
} else {
// Stop the process with clearInterval
clearInterval(myTimer1);
// Display number on text field
jQuery(".outputText").text("Random Number smaller than 20");
}
}
// Execute the function in set interval (milli-seconds)
var myTimer1 = setInterval(generateRandomNumber, 5000);
});
</script>
</head>
<body>
<h2>jQuery Using SetInterval Function 2</h2>
The random number is: <span>Random Numbers...</span>
</body>
</html>
Demo:
jQuery Example File:
In this method, a variable is assigned to the setInterval. The setInterval function returns an ID every time when it is executed. Therefore we can use the clearInterval to stop the setInterval function when it meets a certain criteria.
Let’s take a look at the third method using the jQuery setInterval function.
<head>
<title>jQuery Using SetInterval Function 3</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.random.js"></script>
<script type="text/javascript">
jQuery("document").ready(function() {
myTimer = setInterval(function () {
// Generate a random number between 10 and 60
// Here I used a plugin - jquery.random.js
var ranNum = $.randomBetween(10, 60);
// Display the random number on web page
$(".outputText").text(ranNum);
}, 4000);
});
</script>
</head>
<body>
<h2>jQuery Using SetInterval Function 3</h2>
The random number is: <span>Random Numbers...</span>
</body>
</html>
Demo:
jQuery Example File:
Many jQuery developers like to use the third method in using the setInterval function. Actually, this is up to you.
Leave a Reply