函数节流和函数防抖 - 精准理解与灵活运用
2024-01-25 20:24:35
前言
在前端开发中，经常会遇到需要处理频繁触发的事件，比如滚动、鼠标移动、按键按下等。如果直接在事件处理函数中执行复杂的逻辑，可能会导致页面性能下降，甚至卡顿。为了解决这个问题，函数节流和函数防抖应运而生。这两种技巧可以控制函数的执行频率，在特定时间内只执行一次或多次，从而提高用户体验和代码性能。
函数节流
定义
函数节流（函数节流函数）是指在一个规定的时间段内，不管触发了多少次事件，函数只执行一次，从而防止函数被过多的触发，导致性能问题。
实现
函数节流的实现一般有两种方式：
-
定时器实现：这种实现方式很简单，就是在函数执行前设置一个定时器，如果在定时器到期之前又触发了事件，就重新设置定时器，这样可以保证函数只执行一次。
-
时间戳实现：这种实现方式比定时器实现更准确，它利用时间戳来计算函数上一次执行的时间，如果当前时间与上一次执行时间之差小于指定的节流时间，则不执行函数，否则执行函数。
使用场景
函数节流通常用于以下场景：
-
滚动事件：当用户在页面上滚动时，可以利用函数节流来控制滚动事件的触发频率，从而防止页面频繁重绘，导致卡顿。
-
鼠标移动事件：当用户在页面上移动鼠标时，可以利用函数节流来控制鼠标移动事件的触发频率，从而防止页面频繁重绘，导致卡顿。
-
按键按下事件：当用户在键盘上按下按键时，可以利用函数节流来控制按键按下事件的触发频率，从而防止页面频繁重绘，导致卡顿。
自定义JS工具类
我们可以自定义一个JS工具类来实现函数节流，代码如下：
/**
* 函数节流
* @param {Function} func 要节流的函数
* @param {Number} wait 节流时间，单位毫秒
*/
const throttle = (func, wait) => {
let timeout = null;
return function() {
if (timeout === null) {
func.apply(this, arguments);
timeout = setTimeout(() => {
timeout = null;
}, wait);
}
};
};
函数防抖
定义
函数防抖（函数防抖函数）是指在一个规定的时间段内，只有当事件停止触发后，函数才会执行一次，从而防止函数被频繁触发，导致性能问题。
实现
函数防抖的实现一般有两种方式：
-
定时器实现：这种实现方式很简单，就是在函数执行前设置一个定时器，如果在定时器到期之前又触发了事件，就重新设置定时器，这样可以保证函数只执行一次。
-
时间戳实现：这种实现方式比定时器实现更准确，它利用时间戳来计算函数上一次执行的时间，如果当前时间与上一次执行时间之差大于或等于指定的防抖时间，则执行函数，否则不执行函数。
使用场景
函数防抖通常用于以下场景：
-
输入框输入事件：当用户在输入框中输入内容时，可以利用函数防抖来控制输入事件的触发频率，从而防止输入框频繁重绘，导致卡顿。
-
搜索框输入事件：当用户在搜索框中输入内容时，可以利用函数防抖来控制搜索框输入事件的触发频率，从而防止搜索框频繁重绘，导致卡顿。
-
窗口大小改变事件：当用户调整窗口大小时，可以利用函数防抖来控制窗口大小改变事件的触发频率，从而防止页面频繁重绘，导致卡顿。
自定义JS工具类
我们可以自定义一个JS工具类来实现函数防抖，代码如下：
/**
* 函数防抖
* @param {Function} func 要防抖的函数
* @param {Number} wait 防抖时间，单位毫秒
*/
const debounce = (func, wait) => {
let timeout = null;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments);
}, wait);
};
};
结语
函数节流和函数防抖是前端开发中的常用技巧，可以优化函数的执行频率，提高用户体验和代码性能。通过本文的介绍，相信您已经对这两种技巧有了全面的了解，并能够熟练运用它们来优化您的Web应用程序。在实践中，您可以根据不同的场景选择合适的技巧，并结合自定义JS工具类的实现，来进一步提高代码的可读性和可维护性。
