项目中,经常会用到定时器来实现数据实时更新、时间等等。简单的介绍一下:
Javascript中的定时器有两种,setInterval和setTimeout,而定时器的作用就是延迟执行。
一、定时器的写法
setInterval(expression,milliseconds);
setTimeout(expression,milliseconds);
上式中,expression既可以是字符串,也可以是匿名函数,或者也可以是一个函数名。但是,函数名中不能传参。第二个参数为延迟要执行的时间。
具体写法如下:
(1)函数名,不带参数
function test() {
console.log("holle word");
}
setInterval(test,1000); // 1秒后执行
(2)字符串,可以执行的代码
function test() {
console.log("holle word");
}
setInterval('test()',1000); // 1秒后执行
(3)匿名函数
setInterval(function(){
console.log("holle word");
},1000); // 1秒后执行
注:setTimeout的用法一样
二、定时器的清除
由于定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,所以定时器的清除要借助于这个返回的数字。
定时器清除的方法:clearInterval(str)
和clearTimeout(str)
。
要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值。如下:
var str = setInterval(test,1000);
setTimeout
的用法也一样。
注:有时候在写的时候,还会习惯将清空的定时器的变量置空,这样写既可以释放内存,也可以便于后边代码的判断。
三、定时器的执行机理
定时器:延迟执行。
Javascript:单线程执行。
所以,在代码中遇到定时器时,定时器中要执行的代码,都要排在JS执行代码的后面,如下:
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
})
console.log(i);
}
第14行是我写在定时器里面的输出,可以看出代码执行顺序:先执行完JS主线程代码后,再执行定时器延迟执行的代码。
四、定时器一定准确吗?
var date = new Date().getTime();
var timer = setInterval(function() {
var date1 = new Date().getTime();
console.log(date1 - date)
console.log("holle word");
date = date1;
}, 1000)
显然,定时器并不是百分百准确的,为什么会导致这种现象呢?
造成这一问题的主要原因是js的机制问题
异步事件 setInterval 到时后会把回调函数放入消息队列中Event Queue,主线程的宏任务执行完毕后依次执行消息队列的微任务,等微任务执行完了在循环回来执行宏任务。但是由于消息队列中存在大量任务,其他任务执行时间就会造成定时器回调函数的延迟。
五、定时器中this的指向
// 定时器中this的指向
var name = 'my name is window';
var obj = {
name: 'my name is obj',
fn: function() {
var that = this; // 可以在此处定义一个this,改变this指向
setTimeout(function() {
console.log(); // 定时器中this默认指向window
console.log() // 这里指向obj
}, 1000);
// 也可以使用箭头函数改变this指向
setTimeout(() => {
console.log(); // 这里指向obj
}, 1000)
}
}
obj.fn();
在setTimeout内部,this绑定采用默认绑定规则,也就是说,在非严格模式下,this会指向window;而在严格模式下,this指向undefined