Home >Web Front-end >JS Tutorial >How to use setInterval in JavaScript
When browsing the web, you may see slides or dynamic changes of images and text at regular intervals. So how is this dynamic effect achieved? In fact, this can be achieved through JavaScript timers.
There are two types of timing processors in JavaScript: setInterval and setImeout. Both are very similar JavaScript functions, but the specific actions are slightly different.
Today we will take a look at the usage of setInterval timer
setIntervalCan perform specific operations according to the specified period (in milliseconds) Processing (calling a function or evaluating an expression).
The basic syntax is as follows
setInterval（function函数,固定的时间[,参数1,参数2,参数3,.......]）
function is the definition of a function. Use a comma to distinguish a fixed time (milliseconds). The parameters of the function are specified in [].
Let’s look at a simple code below
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var count = 0;
var countup = function(){
console.log(count++);
}
</script>
</body>
</html>Prepare the count variable, take 0 as the basis, count and add one by one (count), and then use console.log to output. And put this series of processing into the variable of countupp.
Suppose you want to repeat the counting of this variable with a period of 1000 milliseconds, you need to add setInterval
The code is as follows
<script>
var count = 0;
var countup = function(){
console.log(count++);
}
setInterval(countup, 1000);
</script>The running effect is as follows: time will keep going
If you want to stop it, We can use clearInterval
Let’s look at the specific code below
var id = setInterval(countup, 1000);
By specifying this id using clearInterval, you can stop the setInterval processing at any time (obviously, it will stop processing)
<script>
var count = 0;
var countup = function(){
console.log(count++);
}
var id = setInterval(function(){
countup();
if(count > 5){
clearInterval(id);
}}, 1000);
</script>In the above program, when the setInterval repeats the process and countup becomes When it is greater than 5 (if (count> 5)), clearInterval is executed.
Therefore, it goes up to 5 and the result is as follows
The above is the detailed content of How to use setInterval in JavaScript. For more information, please follow other related articles on the PHP Chinese website!