HTML5多線程之--Worker 線程完成輪詢

有時，瀏覽器需要輪詢服務器狀態，以便第一時間得知狀態改變。這個工作可以放在 Worker 裏面。

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) { ... };

  setInterval(function () {
    fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {
  // render data
}

pollingWorker.postMessage('init');

上面代碼中，Worker 每秒鐘輪詢一次數據，然後跟緩存做比較。如果不一致，就說明服務端有了新的變化，因此就要通知主線程。

http://www.ruanyifeng.com/blog/2018/07/web-worker.html