在前端开发中，定时器是一个非常重要的工具。它可以帮助我们定时执行一些代码，例如周期性地更新数据、处理动画效果等。在 ECMAScript 2021 中，定时器方法 setTimeout() 和 setInterval() 进行了一些改进，让它们的使用更加方便和灵活。
setTimeout() 方法的新能力
setTimeout() 方法可以在指定的时间后执行一段代码。在 ECMAScript 2021 中，setTimeout() 方法新增了一个参数 signal，用于指定一个 AbortSignal 对象，用于在执行代码之前取消定时器。
const controller = new AbortController(); const signal = controller.signal; const timeoutId = setTimeout(() => { console.log('Hello, world!'); }, 1000, { signal }); // 取消定时器 controller.abort();
在上面的例子中，我们创建了一个 AbortController 对象，然后使用它的 signal 属性作为 setTimeout() 方法的第三个参数。这样，当我们调用 controller.abort() 方法时，定时器就会被取消，不会执行代码。
setInterval() 方法的新能力
setInterval() 方法可以周期性地执行一段代码。在 ECMAScript 2021 中，setInterval() 方法也新增了一个参数 signal，用于指定一个 AbortSignal 对象，用于在执行代码之前取消定时器。
const controller = new AbortController(); const signal = controller.signal; const intervalId = setInterval(() => { console.log('Hello, world!'); }, 1000, { signal }); // 取消定时器 controller.abort();
在上面的例子中，我们创建了一个 AbortController 对象，然后使用它的 signal 属性作为 setInterval() 方法的第三个参数。这样，当我们调用 controller.abort() 方法时，定时器就会被取消，不会继续周期性地执行代码。
总结
ECMAScript 2021 中的定时器方法 setTimeout() 和 setInterval() 新增了一个参数 signal，用于指定一个 AbortSignal 对象，用于在执行代码之前取消定时器。这个功能可以帮助我们更加灵活地控制定时器的执行，避免一些不必要的代码执行。
示例代码
-- -------------------- ---- ------- -- ------------ -- ----- ---------- - --- ------------------ ----- ------ - ------------------ ----- --------- - ------------- -- - ------------------- --------- -- ----- - ------ --- -- ----- ------------------- -- ------------- -- ----- ----------- - --- ------------------ ----- ------- - ------------------- ----- ---------- - -------------- -- - ------------------- --------- -- ----- - ------- ------- --- -- ----- --------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65deedfb1886fbafa4c34475
