普通轮询
<!DOCTYPE HTML>
<html>
<head>
<title>轮询的坑</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
</body>
<script type="text/javascript">
function getData() {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({data:666})
},500)
})
}
// 轮询
async function start () {
const { data } = await getData() // 模拟请求
console.log(data)
timerId = setTimeout(start, 1000)
}
start ()
</script>
</html>
注:在js中,如果局部变量之前没有加var的时候,对应的函数执行之后,那么该变量变成了全局的。
添加暂停继续的轮询
首次代码
<!DOCTYPE HTML>
<html>
<head>
<title>轮询的坑</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="button">暂停</button>
</body>
<script type="text/javascript">
let timerId = null
function getData() {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({data:666})
},500)
})
}
// 轮询
async function start () {
const { data } = await getData() // 模拟请求
console.log(data)
timerId = setTimeout(start, 1000)
}
// 暂停
function stop () {
clearTimeout(timerId)
}
start ()
const botton = document.querySelector("#button")
let isPlay = true
botton.addEventListener("click", function(){
isPlay = !isPlay
botton.innerHTML = isPlay ? '暂停' : '播放'
isPlay ? start() : stop()
}, false)
</script>
</html>
问题出现:按钮多点几次,点快点,试试,数据会多次请求
分析
- 一进去页面执行start(),start是一个async函数,使得里面的异步也会像同步一样执行,函数的末尾timerId = setTimeout(start, 1000),1000毫秒后再次执行start(),形成了一个轮询(这里的每一个请求之间的间隔肯定是大于1000+500的,至于为什么,可以去了解一下浏览器异步执行原理)
- 将setTimeout的id赋值给timerId,点击按钮后,清除当前定时器
看似没有任何问题,找不到问题的时候就只有一点点试错,最终发现去掉const { data } = await getData()之后,问题消失,请求的时间越长,出现的概率越高
画个图分析一下
BUG出现
- 假如没有const { data } = await getData()这步,点击的时候,click的回调函数能够执行,说明当前js肯定处于空闲状态(永远记住,js的单线程的),这时的setTimeout(start, 1000)一定处于异步状态(js一次只有执行一个任务),
- clearTimeout(timerId)可以很轻松的清除这次任务,不会让它进入js执行线程中执行
- 加上const { data } = await getData()之后,如果js现在处于setTimeout的回调函数已经执行并且等待await getData()中,js是空闲的,click可以执行,click清除了setTimeout的回调函数的执行(回调函数已经执行了),没有清除await getData()回调函数的执行,代码会继续执行console.log(data);timerId = setTimeout(start, 1000),从而不能停止循环,这就是bug产生的原因
bug产生的时机
这就是为什么,请求的时间越长,出现的概率越高
解决方案
<!DOCTYPE HTML>
<html>
<head>
<title>轮询的坑</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="button">暂停</button>
</body>
<script type="text/javascript">
let timerId = 1 // 模拟计时器id,唯一性
let timerObj = {} // 计时器存储器
function getData() {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({data:666})
},500)
})
}
// 轮询
function start () {
const id = timerId++
timerObj[id] = true
async function timerFn () {
if (!timerObj[id]) return
const { data } = await getData() // 模拟请求
console.log(data)
setTimeout(timerFn, 1000)
}
timerFn()
}
// 暂停
function stop () {
timerObj = {}
}
start ()
const botton = document.querySelector("#button")
let isPlay = true
botton.addEventListener("click", function(){
isPlay = !isPlay
botton.innerHTML = isPlay ? '暂停' : '播放'
isPlay ? start() : stop()
}, false)
</script>
</html>