使用生成器模拟时间分片

对于cpu密集型任务, 时间分片可以有效减少页面卡顿, 不过对于纯计算型任务还是推荐使用worker在后台做计算

效果图, 计算密集型任务被分到每次只执行16ms, 每次执行完毕留给浏览器时间去响应事件

如果设置每次执行1s则页面上的输入框在输入时会有明显卡顿

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text">
<script>
  // 计算n*n
  function* fun() {
    let ans = 0
    while(true)
        yield ans++
  }

  function timeSplice(gen, ...args) {
    let g = gen(...args)
    if (!g || typeof g.next !== 'function') return
    // let gap = 1000
    let gap = 16
    return function next() {

      let start = performance.now();
      let res = null;
      do {
        res = g.next();
      } while (!res.done && performance.now() - start < gap);
      if (res.done) return;
      setTimeout(next, gap);
    }
  }

  let ts = timeSplice(fun)
  ts()
</script>

</body>
</html>

也可以使用promise改造, 便于获取函数返回值

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/3161269

标签

gap

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!