需求:项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据
第一部分:在html页面解决方案
//js两种定时器
setInterval(function(){}, 间隔时间)——会不停的调用函数
setTimeout(function(){}, 间隔时间)——只执行函数一次
解决方法如下:
window.setInterval(() => {
setTimeout(()=>{调用}, 0)
}, 1000)
解释:setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。
但是setTimeout是自带清除定时器的
第二部分:在vue中的解决方
// 需求:实时获取接口数据,每隔一秒钟获取一次,我们可以通过定时刷新页面来达到效果
// js两种定时器
// setInterval(function(){}, 间隔时间)——会不停的调用函数
// setTimeout(function(){}, 间隔时间)——只执行函数一次
import axios from "axios";
export default {
data(){
return {
timer:null
}
},
mounted(){
// 页面加载后
// 1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1秒钟后才调用
// 2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.
this.queryInfo()
this.timer = setInterval(() => {
setTimeout(this.queryInfo, 0)
}, 1000)
},
methods: {
queryInfo(){
axios({
url:'https://autumnfish.cn/api/joke',
method:'get',
}).then(res=>{
//成功回调
console.log(res)
})
}
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}