Published on

长任务中断和恢复

Authors
  • avatar
    Name
    Reeswell
    Twitter
    let isPaused = false
    let result = null
    let sum = 0;
    function setIsPaused(value) {
      isPaused = value
    }
    function setResult(value) {
      result = value
    }
    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

    const pause = async () => {
      setIsPaused(true);
      console.log('sum为50时候先歇一会,3s后再继续执行未完成的长任务', sum);
      await sleep(3000);
      setIsPaused(false);
    };

    const longTask = async () => {
      for (let i = 0; i < 100; i++) {
        sum++
        setResult(sum);
        if (sum === 50) {
          setIsPaused(true)
        }
        if (isPaused) {
          await pause();
        }
      }
    };
    async function run() {
      await longTask();
      console.log('done', sum)
    }
    run()
    // sum为50时候先歇一会,3s后再继续执行未完成的长任务 50 
    // done 100 

上述事例使用 async / await 和 Promise 来实现长任务函数的中断和恢复。这样可以让函数在等待某个操作完成时(如异步请求、延时等)将控制权交还给主线程,避免阻塞。