0%

JS 定时器

介绍

JS 有两种计时器方法:

方法 描述
setTimeout(fun,millisec) 在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout(timerID) 方法可取消由 setTimeout() 方法设置的 timeout。
setInterval(fun,millisec) 周期性地调用一个函数(function)或者执行一段代码。
clearInterval(timerID) 取消掉用setInterval设置的重复执行动作。
  • setTimeout

用来指定某个函数或字符串在指定的毫秒数后执行一次;它返回一个整数,表示定时器的编号,这个编号可以传递给 clearTimeout() 用于取消这个函数的执行。

1
2
3
4
5
6
let pollingFunction = () => {
console.log('pollingFunction');
};

pollingFunction.apply(this);
this.pollingTimer = setTimeout(pollingFunction.bind(this), this.pollingDuring);

如果省略第二个时间参数,则默认值为 0。

  • clearTimeout
1
2
3
4
if (this.pollingTimer) {
clearTimeout(this.pollingTimer);
this.pollingTimer = null;
}
  • setInterval

和 setTimeout() 用法完全一致,区别是会循环执行直到被 clearInterval() 取消。

1
2
3
4
5
6
let pollingFunction = () => {
console.log('pollingFunction');
};

pollingFunction.apply(this);
this.pollingTimer = setInterval(pollingFunction.bind(this), this.pollingDuring);
  • clearInterval
1
2
3
4
if (this.pollingTimer) {
clearInterval(this.pollingTimer);
this.pollingTimer = null;
}

最小时间间隔

HTML5 标准规定,setTimeout() 的最短时间间隔是 4 毫秒;setInterval() 的最短时间间隔是 10 毫秒。

this 指向

由于定时器对应函数中的 this 存在隐式丢失 的情况,极易出错,比如:

1
2
3
4
5
6
7
8
9
var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(obj.foo,100); // 0

要想获得 obj 对象中的 a 属性值,可以将 obj.foo 函数进行隐式绑定

1
2
3
4
5
6
7
8
9
10
11
var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(function(){
obj.foo();
},100); // 2

或者也可以使用 bind() 方法将 foo() 方法的 this 绑定到 obj 对象上:

1
2
3
4
5
6
7
8
9
var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(obj.foo.bind(obj),100); // 2

参考文档