起因
最近的一个vue项目要求页面5秒一次实时请求数据, 最开始考虑的是建立websocket长连接进行通信,但是在数据量较大时socket链接会自动断开,后台也没有找到解决办法,最后决定由前端发送定时请求, 但是在使用过程中出现了长时间挂机页面会出现浏览器崩溃的情况
后经过测试是setInterval方法造成的(原因没有搞懂)
解决方案
使用requestAnimationFrame方法代替setInterval进行实时请求
export function RAFInit () {
let RAF = {
intervalTimer: null,
timeoutTimer: null,
setTimeout (cb, interval) { // 实现setTimeout功能
let now = Date.now
let stime = now()
let etime = stime
let loop = () => {
this.timeoutTimer = requestAnimationFrame(loop)
etime = now()
if (etime - stime >= interval) {
cb()
cancelAnimationFrame(this.timeoutTimer)
}
}
this.timeoutTimer = requestAnimationFrame(loop)
return this.timeoutTimer
},
clearTimeout () {
cancelAnimationFrame(this.timeoutTimer)
},
setInterval (cb, interval) { // 实现setInterval功能
let now = Date.now
let stime = now()
let etime = stime
let loop = () => {
this.intervalTimer = requestAnimationFrame(loop)
etime = now()
if (etime - stime >= interval) {
stime = now()
etime = stime
cb()
}
}
this.intervalTimer = requestAnimationFrame(loop)
return this.intervalTimer
},
clearInterval () {
cancelAnimationFrame(this.intervalTimer)
}
}
return RAF
}
调用:
import {RAFInit} from '文件路径'
getAll () {
console.log('实时请求的数据')
},
startSetInterval() { // 启用实时请求
this.RAF = RAFInit()
this.RAF.setInterval(this.getAll, 5000)
}
stop () { // 关闭实时请求
if (this.RAF) {
this.RAF.clearInterval()
this.RAF = null
}
}