Vue定时器轮询+终止轮询

it2025-08-01  2

轮询

最近项目中需要实现轮询,每隔5s请求一次数据。

window.timer = setInterval(()=>{ this.promiseFun() },5000)

在其他博客中看到,一般都会使用setInterval,但要注意单纯使用它可能导致页面卡死。 原因是setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,卡死。 但是setTimeout是自带清除定时器的 所以可以叠加使用。

window.timer = setInterval(() => { setTimeout(this.promiseFun(), 0) }, 5000)

根据需要,将轮询定时器加在需要的地方即可。

结束轮询

在需要结束轮询,或者beforeDestroy生命周期函数中销毁定时器

clearInterval(timer)

如果需要通过按钮手动结束轮询,在按钮的click事件响应函数中加上clearInterval(timer)即可

最新回复(0)