How to use setInterval in JavaScript-JS Tutorial-php.cn

How to use setInterval in JavaScript

不言

Release： 2018-12-15 09:36:01

Original

8175 people have browsed it

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.

How to use setInterval in JavaScript

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,.......]）

Copy after login

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>

Copy after login

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>

Copy after login

The running effect is as follows: time will keep going

How to use setInterval in JavaScript

If you want to stop it, We can use clearInterval

Let’s look at the specific code below

var id = setInterval(countup, 1000);

Copy after login

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>

Copy after login

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

How to use setInterval in JavaScript

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!