定时器setInterval()与setTimeout()

js中的两种定时器

一、setInterval()

按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

语法：

window.setInterval(code, millisec)

注意：

1. window 可以省略。

2. 第一个参数：重复执行的代码，必须， 有三种形式，可以直接写函数、写函数名、写字符串”functionName()”。

3. 第二个参数：间隔的毫秒数，必须，省略默认是0，如果写，单位必须是毫秒，表示每隔多少毫秒就自动调用这个函数。（1000毫秒 = 1秒）

4. 用 clearInterval(id_of_setinterval)清除定时器。调用 setInterval() 函数时会获得一个返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作。（在vue和小程序中，切换页面后，原页面设置的定时器如果不清除会一直保留）

   <div class="box">
       <button onclick="start()">开始</button>
       <button onclick="stop()">停止</button>
   </div>
   <script>
       let int = null
       function logTime(num) {
           
           
           console.log(new Date().toLocaleTimeString());
       }
       function start() {
           
           
           //直接写函数
           int = setInterval(()=>{
           
           
               console.log(new Date().toLocaleTimeString());
           }, 1000)
           //写函数名
           // int = setInterval(logTime, 1000)
           //写字符串"functionName()"
           // int = setInterval("logTime()", 1000)
           //以上三种写法都是每隔一秒在控制台输出一次当前时间，直到 clearInterval() 被调用或窗口被关闭。
       }
       function stop() {
           
           
           clearInterval(int)
           //或
           // int = clearInterval(int)
           //或
           // int = window.clearInterval(int)
       }
   </script>
   

二、setTimeout()

在指定的毫秒数后调用函数或计算表达式。

语法：

window.setTimeout(code, millisec)

1. window 可以省略。

2. 第一个参数 code：定时执行的代码，必须， 有三种形式，可以直接写函数、写函数名、写字符串"functionName()"。

3. 第二个参数：间隔的毫秒数，必须，省略默认是0，如果写，单位必须是毫秒，表示每隔多少毫秒就自动调用这个函数。（1000毫秒 = 1秒）

4. 用 clearTimeout(id_of_setinterval) 清除定时器。调用 setTimeout() 函数时会获得一个返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作。（如果下例开始定时器后，3s内执行了clearTimeout(int)，那么 logTime() 函数将没机会执行）

   function start(params) {
         
         
       //直接写函数
       // int = setTimeout(()=>{
         
         
       //     console.log(new Date().toLocaleTimeString());
       // }, 1000)
       //写函数名
       //  int = setTimeout(logTime, 1000)
       //写字符串'functionName()”
       int = setTimeout("logTime()", 3000)
       //以上三种写法都是3秒后在控制台输出当前时间（只输出一次）
   }
   function stop() {
         
         
       // clearTimeout(int)
       //或
       // int = clearTimeout(int)
       //或
       int = window.clearTimeout(int)
   }