Web Worker在redux-saga上应用定时器

本人正在做的项目遇到这样的一个需求，需要每隔一段时间（例如1分钟）就要从服务器拉取数据弹出新信息，我选择了用轮询的方法去做，为什么不用websocket推送，因为开发时间关系--

很快就写了主要逻辑，路由监听在非登录页的地方进行第一次调用（配合flag，防止多次调用），在函数内利用delay阻塞，时间过后再往下调用接口、执行代码，然后再调用相同函数，以此达到一定时间间隔的调用。代码如下：

// app.js
...
effects: {
    *getRemindingMessage({ payload }, { call, put }) {
      // 延迟一定时间
      yield delay(REMIND_TIME)
      const res = yield call(getRemindingMessage, payload)
      if (res.state === '1') {
          ...
          // 再去调用
          yield put({
             type: 'getRemindingMessage',
             payload: {},
          })
      }
    }
}
...
subscriptions: {
  setupHistory({ dispatch, history }) {
    history.listen(location => {
        ...
        // 第一次开始的地方
        if (history.location.pathname !== '/login' && firstNotify) {
            firstNotify = false
            dispatch({
                type: 'getRemindingMessage',
                payload: {}
            })
        }
    })
  }
}

然后无意中发现了问题，上图

问题

看到nprogress一直是loading状态，查看了Redux DevTools，发现

chrome开发工具截图

很快定位到问题，effects里的getRemindingMessage函数有delay，它一直在函数里阻塞，导致这个effects一直是loading状态，从而nprogress一直是loading，但我们希望nprogress的作用仅仅是反应接口的响应情况，而不是还得顾及定时器的处理逻辑。

那我就不用同步(yield)的写法了，尝试用setTimeout回调

翻车

看来定时器里不能写yield，现在又需要有计时的逻辑，忽然想到用Web Worker，就用它来帮我计时吧

先写一个worker的生成函数，方便复用

// utils/index.js
// 生成web worker
export function createWorker(f) {
  let code = f.toString()
  code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'))
  const blob = new Blob([code], { type: 'application/javascript'})
  const url = URL.createObjectURL(blob)
  return new Worker(url)
}

接着写计时worker

onmessage用来监听主线程发过来的时机，等待主线程传来的参数（时间）用来计时，到一定时间告诉主线程要做动作了

// utils/timerWorker.js
export default function () {
  self.onmessage = function(e) {
    setTimeout(() => {
      self.postMessage(null)
    }, e.data)
  }
}

主线程逻辑，将delay干掉

【1】主：先new一个worker（封装在createWoker），我把时间（1分钟）告诉给worker
【2】子：收到时间（1分钟），我开始倒计时，时间到了再告诉你。。。时间到了
【3】主：收到你的提醒，我要执行方法了
【4】方法：调用接口，根据返回做完处理动作了，我告诉子线程重新计时吧
【5】子：收到时间（1分钟），我开始倒计时。。。然后跳到【3】

// app.js（修改后）
...
import { createWorker } from 'utils'
import worker from 'utils/timerWorker'
...
// 定义一个变量准备给worker实例
let myWorker = null
...
effects: {
    *getRemindingMessage({ payload }, { call, put }) {
      // 延迟一定时间，删掉
      // yield delay(REMIND_TIME)
      const res = yield call(getRemindingMessage, payload)
      if (res.state === '1') {
          ...
          // 再去调用，改为告诉worker要倒计时了
          // yield put({
          //   type: 'getRemindingMessage',
          //   payload: {},
          // })
          myWorker.postMessage(REMIND_TIME)
      }
    }
}
...
subscriptions: {
  setupHistory({ dispatch, history }) {
    history.listen(location => {
        ...
        // 第一次开始的地方
        if (history.location.pathname !== '/login' && firstNotify) {
            firstNotify = false
            myWorker = createWorker(worker) 
            // 带着时间告诉worker，目的是告诉子线程可以开始在这个时间后再告诉我了
            myWorker.postMessage(REMIND_TIME)
            // 一旦worker子线程告诉我可以，我就可以执行里面的代码
            myWorker.onmessage = function(e) {
                dispatch({
                  type: 'getRemindingMessage',
                  payload: {}
                })
            }
        }
       if (history.location.pathname === '/login') {
          // 别忘了做清除工作，记得销毁worker
          myWorker && myWorker.terminate()
      }
    })
  }
}

修改完，观察Redux DevTools，没毛病，loading没被定时器阻塞