不用settimeout
时间: 2024-08-23 13:00:37 浏览: 79
浅谈对于“不用setInterval,用setTimeout”的理解
在 Vue 中,如果你不想使用 `setTimeout` 实现短暂的暂停,你可以利用 Vue 的响应式机制配合 `nextTick` 函数来达到类似的效果。`nextTick` 是 Vue 提供的一个钩子函数,它会在下一次 DOM 更新循环之后回调,通常用于在数据改变之后更新视图。
例如,如果你想在切换数据后等待5秒再执行后续操作,你可以这样做:
```js
data() {
return {
delayCount: 0,
}
},
methods: {
async pauseFiveSeconds() {
this.delayCount++;
if (this.delayCount <= 5) {
await this.$nextTick();
} else {
// 5秒后执行的逻辑
console.log('5秒已过,执行后续代码');
}
}
}
```
在这个例子中,每次调用 `pauseFiveSeconds` 时,`delayCount` 自增1,直到达到5时才真正执行后续代码。由于 `$nextTick` 是在下一次 DOM 更新之后执行,所以实际上起到了暂停的作用。
阅读全文