详解setTimeout()、setInterval()

定时器

方法	描述
setInterval	周期性的调用一个函数或者执行一段代码
clearInterval	清除setInterval设置的动作
setTimeout	指定延迟一定的时间后调用一个函数或者执行某一个动作
clearTimeout	清除setTimeout设置的动作

setInterval()

语法

    var intervalID = setInterval(func, delaytime)
    // 不推荐
    var intervalID = setInterval(code, delaytime)
    

• intervalID：重复操作的唯一标识符，同时也是clearInterval()的参数,类型是Number
• func：重复调用的函数
• delaytime：延迟时间，函数每次调用会在该延迟之后，实际的延迟时间可能会稍长
• 实例

setInterval(() => {
    // code
}, 1000)

clearInterval()

语法

    clearInterval(intervalId)

• intervalId 是想取消重复执行的动作，由setInterval()返回的

---

setTimeout()

语法

    var timeoutID = setTimeout(func, delaytime);
    // 不推荐
    var timeoutTD = setTimeout(code, delaytime);

• timeoutID：延时操作的唯一标识，同时也是clearTimeout()的参数，类型是Number
• func：delaytime延时之后要执行的函数
• delaytime：延迟毫秒数，函数调用会在该延迟之后发生
• 实例

    setTimeout(() => {
        // code
    }, 1000)
    

clearTimeout()

语法

    clearTimeout(timeoutID)

• timeoutID 是想取消延迟执行动作，由setTimeout()返回的

---

踩坑

• 注意每调用一次setInterval/setTimeout就会产出一个新的intervalId/timeoutId

    var IntervalID;
    var num = 0;
    function createInterval(add) {
      IntervalID = setInterval(function() {
        console.log('log', num+add);
      }, 2000);
      console.log('IntervalID is', IntervalID);
    }
    this.createInterval(1);
    this.createInterval(2);
    
    // 结果
    // IntervalID is 344
    // IntervalID is 345
    // log 1
    // log 2
    // log 1
    // log 2
    // ......

• 当intervalId/timeout是同一个变量时，无论使用clearInterval()/clearTimeout()多少次都只能清除最后一次创建的intervalId/timeoutId，除非intervalId/timeoutId是不同变量才可以进行指定清除

    var TimeoutID;
    var num = 0;
    function createTimeout(add) {
      TimeoutID = setTimeout(function() {
        console.log('log', num+add);
      }, 2000);
      console.log('TimeoutID is', TimeoutID);
    }
    this.createTimeout(1);
    this.createTimeout(2);
    clearTimeout(TimeoutID);
    
    // 结果
    // TimeoutID is 378
    // TimeoutID is 379
    // log 1