Home >Web Front-end >JS Tutorial >How to use setInterval in JavaScript

How to use setInterval in JavaScript

不言Original: 2018-12-14 16:25:108246browse

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

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);

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

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!

JavaScript if count console function

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to manipulate the DOM using JavaScriptNext article：How to manipulate the DOM using JavaScript

See more

How to use setInterval in JavaScript

Related articles