JS延迟执行函数的几种方式

想要提升JavaScript代码的性能和用户体验吗？本文深入探讨了JS延迟执行函数的几种实用方法，包括`setTimeout`、`setInterval`以及`requestAnimationFrame`。通过`setTimeout`，你可以设置函数在指定延迟后执行，而`setInterval`则能实现函数的重复执行，记得配合`clearInterval`来停止重复。`requestAnimationFrame`则特别适用于动画场景，与浏览器重绘同步，性能更优。此外，文章还讲解了如何使用`clearTimeout`和`clearInterval`取消延迟执行，并分析了延迟执行在优化页面加载、创建动画效果、处理用户输入以及避免阻塞主线程等方面的应用。即使`setTimeout`延迟设为0，函数也不会立即执行，而是等待当前执行栈清空后运行，体现了JavaScript事件循环机制的关键作用。掌握这些技巧，让你的JS代码更高效、更流畅！

JavaScript中延迟执行函数的方法主要有三种：1. 使用setTimeout在指定延迟后执行函数，如setTimeout(myFunction, 2000)表示2秒后执行；2. 使用setInterval按固定间隔重复执行函数，需配合clearInterval停止；3. 使用requestAnimationFrame在浏览器重绘前执行，适合动画场景。取消延迟执行需调用clearTimeout或clearInterval并传入对应ID。延迟执行可用于优化页面加载、创建动画、处理用户输入和避免阻塞主线程。即使setTimeout延迟设为0，函数也不会立即执行，而是等待当前执行栈清空后才运行，体现了事件循环机制的作用，因此输出顺序为“开始”、“结束”、“setTimeout 0”，该特性有助于提升用户体验和性能。

JavaScript中延迟执行函数，简单来说就是让函数在指定的时间后执行，而不是立即执行。这在处理异步操作、动画效果或者优化页面性能时非常有用。

解决方案：

JavaScript提供了几种方法来实现延迟执行函数：setTimeout、setInterval，以及requestAnimationFrame（虽然主要用于动画，但也可以实现延迟执行）。

1. setTimeout: 这是最常用的方法。它允许你设置一个延迟时间（以毫秒为单位），并在该时间过后执行指定的函数。

   function myFunction() {
     console.log("函数执行了！");
   }
   
   setTimeout(myFunction, 2000); // 2000毫秒 = 2秒后执行myFunction

   setTimeout 接受两个主要参数：要执行的函数和一个延迟时间（毫秒）。 还可以传递额外的参数给要执行的函数：

   function greet(name) {
     console.log("你好, " + name + "!");
   }
   
   setTimeout(greet, 1500, "张三"); // 1.5秒后执行greet("张三")

2. setInterval: 与 setTimeout 类似，但 setInterval 会按照指定的时间间隔重复执行函数，直到你使用 clearInterval 停止它。

   let counter = 0;
   let intervalId = setInterval(function() {
     console.log("计数器: " + counter);
     counter++;
     if (counter > 5) {
       clearInterval(intervalId); // 停止重复执行
     }
   }, 1000); // 每隔1秒执行一次

   务必记得在使用 setInterval 后，在适当的时候使用 clearInterval 来停止它，否则函数会一直重复执行下去，可能导致性能问题。

3. requestAnimationFrame: 这个方法主要用于动画，它会在浏览器下一次重绘之前执行指定的函数。虽然不是专门用于延迟执行，但可以用它来实现类似 setTimeout 的效果，而且性能更好，因为它与浏览器的刷新频率同步。

   function delayedFunction() {
     console.log("requestAnimationFrame 执行了！");
   }
   
   requestAnimationFrame(function() {
     setTimeout(delayedFunction, 1000); // 1秒后执行 delayedFunction
   });

   这里，我们利用 requestAnimationFrame 来确保在浏览器准备好更新屏幕时才执行 setTimeout，从而避免不必要的重绘。

如何取消延迟执行？

如果你在使用 setTimeout 或 setInterval 后，希望取消延迟执行或停止重复执行，可以使用 clearTimeout 和 clearInterval 函数。

let timeoutId = setTimeout(function() {
  console.log("这个函数不会被执行，因为它被取消了！");
}, 3000);

clearTimeout(timeoutId); // 取消 timeoutId 对应的 setTimeout

let intervalId = setInterval(function() {
  console.log("这个函数也不会重复执行，因为它被取消了！");
}, 1000);

clearInterval(intervalId); // 取消 intervalId 对应的 setInterval

clearTimeout 和 clearInterval 都接受一个参数，即 setTimeout 或 setInterval 返回的 ID。

为什么使用延迟执行？

延迟执行有很多实际用途：

• 优化页面加载: 可以将一些不重要的任务延迟到页面加载完成后执行，从而加快页面首次渲染的速度。
• 创建动画效果: 可以使用 setTimeout 或 requestAnimationFrame 来创建平滑的动画效果。
• 处理用户交互: 例如，在用户输入停止一段时间后才执行搜索请求，可以减少不必要的请求。
• 避免阻塞主线程: 对于耗时的操作，可以使用 setTimeout 将其放到事件循环的后面执行，避免阻塞主线程，提高用户体验。

setTimeout 的 0 延迟意味着什么？

一个常见的误解是，setTimeout(myFunction, 0) 会立即执行 myFunction。实际上，0 延迟并不意味着立即执行。它意味着将 myFunction 放到事件队列中，等待当前执行栈清空后，再执行 myFunction。 这可以用来避免长时间运行的脚本阻塞UI更新。

console.log("开始");

setTimeout(function() {
  console.log("setTimeout 0");
}, 0);

console.log("结束");

// 输出顺序：
// 开始
// 结束
// setTimeout 0

尽管延迟时间是 0，但 setTimeout 中的函数仍然会在 "开始" 和 "结束" 之后执行，因为它被放到了事件队列的末尾。 这背后的机制与JavaScript的事件循环密切相关。理解这一点对于编写高效的异步代码至关重要。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~