在vue中使用定时器setTimeout、setInterval的心得

最新推荐文章于 2024-05-28 10:02:16 发布

原创最新推荐文章于 2024-05-28 10:02:16 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#定时器 #vue #setTimeout #this

本文介绍了在Vue项目中使用定时器的实践经验，包括选择使用window对象上的定时器、确保在beforeDestroy钩子中清理定时器，以及探讨了setTimeout中this对象的特性和疑惑。同时，提到了将setTimeout函数赋值给对象属性时出现的意外报错现象。

最近在做一个数据可视化的项目，其中就不得不考虑数据项定时刷新功能了。
所以就在我们的vue项目中使用了定时器。

1、在vue中，有两套定时器，一套是浏览器API，window对象上的；另一套就是vue/nodejs封装的，需要引入

import { setInterval, clearInterval } from 'timers'

建议使用window对象自带的，因为不容易错。
如果一不小心只引入一个，就怎么也清不掉了。

import { setInterval } from 'timers' // 错误

2、一定要在beforeDestroy中清除定时器。

3、在setTimeout中定义的函数时，奇怪的this对象

mounted () {
	// 第一种，标准调用
	// this指向window对象,因为回调函数是在全局环境下调用的
	window.setTimeout(function () { console.log(this) }, 0)
	
	// 第二种，箭头函数调用
	// 箭头函数在定义时确定this对象的,是vue实例
	window.setTimeout(() => console.log(this), 0)
	
	// 第三种，立即执行函数
	window.setTimeout((function () {
			// this竟然是undefined！不可思议
			// 事实上，this为undefined的情况就只有模块的顶层对象
			// 也就是说，这里的this指向的就是当前vue模块的顶层对象（？？？）
			console.log(this)
			// this是window对象
			return function () { console.log(this) }
	})(), 1000)
	
	// 最稳妥的方法
	var callback = (function ()  {
		console.log(this)
	}).bind(this)
	setTiemout(callback, 0)
}

其实很容易理解，我们传给setTimeout的函数，本质上是传了地址过去的，由于箭头函数在定义时就绑定了this，说以这里的this自然而然是vue实例，而普通的函数由于调用的时候是在全局对象上调用的，因此必然是顶层对象。
this对象是一个特殊的对象，它只属于当前函数，不存在于变量作用域中，因此也不在闭包的体系中。
但我仍不太明白，为什么第三种立即执行函数中的this不是vue实例。

2019/10/11
最近发现一个很有意思的现象：当把setTimeout函数作为值赋给一个对象的属性，发现会报错。

var a = {
	setTimeout: window.setTimeout
}

a.setTimeout(callback, 0) // 报错

本来我只是想试验setTimeout中执行callback时是否是在this上执行（setTimeout中是否能改变this指向）。
目前不想深究这个问题，恐怕很底层。