JS执行长任务时如何让出控制权？分享1段优质JS代码片段！-CSDN博客

本文链接：https://blog.csdn.net/weixin_43303603/article/details/140535677

Hi，这里是前端后花园，每天学习一个 JS 片段，涨涨知识🧀！今天带来的是JS执行长任务时如何让出控制权。

代码片段

function breakItUp () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function superLongTaks() { 
  console.log('开始做一些事情...');  
  // 异步等待breakItUp中的Promise解决  
  await breakItUp(); 
  console.log('完成做一些事情，现在做更多事情...');  
  // 这里可以添加更多需要异步等待的代码  
}

superLongTasks();

分享原因

JavaScript 中的“长任务”指的是那些执行时间过长，会阻止主线程响应（UI线程、事件循环）、用户交互，影响用户体验；
JavaScript 中的“长任务”需要分解成多个任务，以便浏览器有足够的空间来响应任何待处理的交互；
同时通过在多个任务执行间隙将控制权“交还”给浏览器，让其运行可能堆积的任何重要任务（页面渲染、用户输入等），保证页面交互流畅。

代码解析

创建 Promise：new Promise(resolve => setTimeout(resolve, 0)) 创建了一个新的 Promise 对象。这个 Promise 将在 setTimeout 的回调函数被调用时resolve
设置 setTimeout：setTimeout 的回调函数并不是在达到延迟后立即执行，而是会在当前执行栈清空、所有微任务完成后，作为下一个宏任务执行；
控制权交还事件循环：在 await 等待 Promise 解决的过程中，JavaScript 运行时将控制权交还给事件循环。此时，事件循环会检查并执行任何待处理的微任务，然后处理任何新的宏任务，比如其他 setTimeout、setInterval、I/O 回调等。由于创建的 Promise 依赖于 setTimeout，它会等待直到下一个宏任务执行周期。
执行 await 后代码：下一个宏任务时promise被resolve后，执行后续代码逻辑