为什么要用?
实现延迟执行某些操作,例如延迟更新数据、执行动画
怎么用?
setTimeout(() => {
this.message = 'Hello after 2 seconds!';
}, 2000);
格式
setTimeout( ()=> {} ,延迟时间(单位ms) );
还有什么用法?
注意 在上面的例子中,由于我们使用了箭头函数,它不会创建自己的 this
上下文,而是继承父执行上下文中的 this
。如果你使用普通函数而不是箭头函数,你需要确保 this
的正确绑定,比如通过 .bind(this)
另外,如果你需要在组件销毁时清除 setTimeout
设置的定时器,以避免内存泄漏,你可以在组件的 beforeDestroy
或 destroyed
生命周期钩子中调用 clearTimeout
函数:
export default {
data() {
return {
timer: null,
message: 'Hello Vue!'
};
},
mounted() {
this.startTimer();
},
beforeDestroy() {
this.clearTimer();
},
methods: {
startTimer() {
// 保存定时器的引用
this.timer = setTimeout(() => {
this.message = 'Hello after 2 seconds!';
}, 2000);
},
clearTimer() {
// 清除定时器
clearTimeout(this.timer);
}
}
};