js中的定时器的简介-CSDN博客

本文链接：https://blog.csdn.net/fancy_vae/article/details/108567164

项目中，经常会用到定时器来实现数据实时更新、时间等等。简单的介绍一下：

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.name); // 定时器中this默认指向window
                    console.log(that.name) //  这里指向obj
                }, 1000);
                // 也可以使用箭头函数改变this指向
                setTimeout(() => {
                    console.log(this.name); // 这里指向obj
                }, 1000)
            }
        }
        obj.fn();