setInterval和setTimeout

1. 总结

主要是使用setInterval有一些需要注意的地方

1.1. setTimeout和setInterval()的时间间隔是不可动态修改的

要解决这个问题，可以使用clearTimeout/clearInterval和重新setTimeout/setInterval相结合的方式实现。

1.1.1. 错误方式

let interval = 500; let id = setInterval(function () { 
    interval /= 2; console.log('-----------------'); if(t <= 10){ 
    clearInterval(id ); } }, interval); 

1.1.2. 正确方式

let interval = 200; let set1 = setInterval(fn, t); function fn() { 
    interval -= 10; clearInterval(set1); if (interval > 0) { 
    set1 = setInterval(fn, t); } } 

结论：实践证明，直接改变“interval”值不会起任何效果；正确的做法是先通过clearInterval方法暂停之前的定时器，然后从新启动它。

1.2. setInterval()方法的弊端

使用setInterval()方法需要注意一些地方

1.2.1. setInterval间歇问题

这种情况常见于网络延时。

setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出ajax请求）。

这种情况下，setInterval()可使用setTimeout来替代，如下

var j=11; function logCount() { 
    console.log(j); j++; if(j<15){ 
    setTimeout(logCount,1000); } } logCount(); 

1.2.2. 遇到错误不会停止

setInterval(function(){ 
    throw ''; },2000); 

解决办法：

1. 使用try catch在catch中clearInterval()
2. 使用setTimeout代替setInterval()。

//第一种方法 let id = setInterval(function(){ 
    try{ 
    throw ''; }catch(e){ 
    console.error(e); clearInterval(id); } },2000); 

1.3. clearTimeout()和 clearInterval()

返回值timeoutID/intervalID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()/clearInterval()来取消该定时。

需要注意的是setTimeout()和setInterval()共用一个编号池，技术上，clearTimeout()和 clearInterval() 可以互换。但是，为了避免混淆，不要混用取消定时函数。

在同一个对象上（一个window或者worker），setTimeout()或者setInterval()返回的定时器编号不会重复。但是不同的对象使用独立的编号池。

1.4. this

解决方法参考：关于this的问题

由setTimeout()/setInterval()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window(或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。

在严格模式下，setTimeout( )的回调函数里面的this仍然默认指向window对象， 并不是undefined

2. window.setTimeout

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时。

2.1. 语法

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]); var timeoutID = scope.setTimeout(function[, delay]); var timeoutID = scope.setTimeout(code[, delay]); 

2.1.1. function

function 是你想要在delay毫秒之后执行的函数。

2.1.2. code

这是一个替代语法，你可以使用字符串代替function ，在delay毫秒之后执行字符串 (使用该语法是不推荐的, 原因和使用 eval()一样，有安全风险)。

2.1.3. delay 可选

延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0。实际的延迟时间可能会比 delay 值长，原因请查看Reasons for delays longer than specified。

2.1.4. param1, …, paramN 可选

附加参数，一旦定时器到期，它们会作为参数传递给function 或 执行字符串（setTimeout参数中的code）

2.1.5. 注意

备注：需要注意的是，IE9 及更早的 IE 浏览器不支持第一种语法中向延迟函数传递额外参数的功能。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码

3. window.setInterval

setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟

返回一个 intervalID。

3.1. 语法

let intervalID = window.setInterval(func, delay[, param1, param2, ...]); let intervalID = window.setInterval(code, delay); 

3.2. 参数

• intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()。
• func 是你想要重复调用的函数。
• code 是另一种语法的应用，是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的，不推荐的原因和eval()一样)。
• delay 是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和setTimeout一样，实际的延迟时间可能会稍长一点。

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码