js轮询及踩过的坑

时间 2019-11-06

原文原文链接

背景

下午四点，天气晴朗，阳光明媚，等着下班
产品：我但愿页面上的这个数据实时变化
开发：···，能够，用那个叫着WebSocket的东西，再找一个封装好框架，如：mqtt（感受本身好机智）
产品：要开发很久
开发：嗯，三天，五天，仍是···
产品：我但愿今天上线
开发：···，···，···（不能描述的语言，话说segmentfault为何不支持表情）
开发：果断选择轮询javascript

开发中

<!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>

开发：今晚的月亮真圆啊，下班了···html

次日

产品：我但愿这个实时加载，能为所欲为，我喊它加载就加载，喊它停就停
研发：(石化中···)java

继续开发中

<!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>

开发：（这么可贵需求我都实现了，我是否是已是专家了，我是否是应该升职加薪，接着赢娶白富美，走向人生巅峰，哈哈哈）
正沉醉于本身的成果中
产品：你的有bug
开发：（绝对不信中，确定是你握鼠标的姿式不对，手感很差），怎么可能有bug，你是否是环境有问题，还在用ie6，多刷新几回
产品：···，你按钮多点几回，点快点，试试，数据会屡次请求
开发：半信半疑的去尝试，还真是（好奇怪，检查了一圈没有发现任何问题）segmentfault

分析过程

一进去页面执行start()，start是一个async函数,使得里面的异步也会像同步同样执行，函数的末尾timerId = setTimeout(start, 1000)，1000毫秒后再次执行start()，造成了一个轮询（这里的每个请求之间的间隔确定是大于1000+500的，至于为何，能够去了解一下浏览器异步执行原理）
将setTimeout的id赋值给timerId，点击按钮后，清除当前定时器

看似没有任何问题，找不到问题的时候就只有一点点试错，最终发现去掉const { data } = await getData()以后，问题消失，请求的时间越长，出现的几率越高
画个图分析一下

先看一下js执行过程，按钮的click事件也至关于异步，而后咱们再来文字分析一下，问题出现的缘由浏览器

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>