vue.js项目,每隔5秒请求一次接口,接口有返回则停止请求,没有返回继续请求。
先看两种定时器
setInterval(function(){}, milliseconds)
setTimeout(function(){}, milliseconds)
注意:单纯的使用setInterval会导致页面卡死!
由于setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死网页。 但是setTimeout是自带清除定时器的,因此正确解决方法如下:
window.setInterval(() => {
setTimeout(fun, 0)
}, 30000)
setInterval必须放在外层,内层配合setTimeout,便可以无限次调用接口
回到要解决的问题,如何在得到数据后停止定时器?
methods: {
click () {
let timer = setInterval(() => {
this.fun(timer)
}, 5000)
fun (timer) {
setTimeout(()=>{
..........
clearInterval(timer)
}, 0)
如果增加在请求n次后还是没有结果的话,就停止请求,只需在data里面定义一个计数字段 i 默认为 0,setTimeout内请求时执行 ++i ,后续判断即可
注意,在这个示例中,我们使用了嵌套的定时器,因此需要注意避免定时器的重叠和冲突。具体来说,我们在创建第二个定时器之前,先等待1秒钟,以确保第一个定时器的操作代码已经执行完毕。这样可以避免定时器的操作代码同时执行,导致不必要的错误和冲突。首先,我们在第1秒钟立即执行一次定时器的操作代码,并在其中创建一个重复执行的定时器。在这个定时器中,我们设置了一个时间间隔为5秒钟的。如果你想在第1秒钟就执行一次定时器的操作代码,并在之后每5秒钟重复执行一次,可以使用。方法,用于每5秒钟重复执行操作代码。
setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。其原因与JS引擎线程有关(需深入研究JS引擎线程) ,但是setTimeout是自带清除定时器的。一个是循环执行setInterval,另一个是定时执行setTimeout。1:setInterval 循环执行, 每隔一段时间执行一次, 多次执行。2:setTimeout 到时间后执行, 只执行一次。定时器需要在页面销毁的时候清除掉,不然会一直存在!timer:null, //定时器名称。
1. setInterval() 间歇调用
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
参数 描述
code/function 必需。要调用一个代码串,也可以是一个函数。
milliseconds 必须。周期性
this.timer=window.setInterval(() => {
setTimeout(() => {
api.setControlResult(id).then((res) => {
if (res.data.code == '500') {
在 Vue 项目中,您可以使用 axios 等 HTTP 库在页面创建前先获取数据,然后使用 setInterval() 方法每隔 5 秒轮询一次接口。
mounted() {
this.getData();
this.interval = setInterval(() => {
this.getData();
}, 5000);
beforeDestroy...