如何精确掌握函数防抖和函数节流的使用？

前序

函数防抖（Debouncing）和函数节流（Throttling）都是用于控制函数执行频率的技术，通常在处理高频率触发的事件（如窗口滚动、鼠标移动、输入框输入等）时非常有用

一、核心概念

函数防抖

函数防抖的核心思想是，在某个事件持续触发时，只有当事件停止触发一段时间后，才执行相应的函数。这意味着如果事件在一定时间内持续触发，函数将不会被执行，直到事件停止触发并且等待一定的延迟时间后才执行。

关键概念：

触发事件时，设置一个定时器，延迟一定时间后执行函数。
如果事件再次触发，清除之前的定时器，重新设置新的定时器。
只有在事件停止触发一段时间后，定时器才会执行函数。

函数节流

函数节流的核心思想是，在某个事件持续触发时，控制函数的执行频率，确保函数在一定时间间隔内最多只能执行一次。与函数防抖不同，函数节流会按照一定的时间间隔持续执行函数，而不会等待事件停止触发。

关键概念：

触发事件时，设置一个定时器，在定时器时间间隔内只允许执行一次函数。
如果事件再次触发，即使定时器还在计时，也不会执行函数，直到定时器计时结束。

二、函数防抖和节流的代码实现

函数防抖的实现：

函数防抖的关键在于使用 setTimeout 来延迟执行函数，如果在延迟期间再次触发事件，则取消之前的延迟，重新设置新的延迟。

function debounce(func, delay) {let timeoutId;return function (...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}// 使用例子
const debouncedFunction = debounce(() => {console.log("Debounced function executed.");
}, 1000);// 某个事件触发时调用 debouncedFunction
debouncedFunction();

函数节流的实现：

函数节流的关键在于使用一个标志变量来控制函数是否可以执行，以及设置一个定时器，在定时器内将标志变量重置，以便在下一次时间间隔内执行函数。


function throttle(func, delay) {let canRun = true;return function (...args) {if (!canRun) return;canRun = false;setTimeout(() => {func.apply(this, args);canRun = true;}, delay);};
}// 使用例子
const throttledFunction = throttle(() => {console.log("Throttled function executed.");
}, 1000);// 某个事件触发时调用 throttledFunction
throttledFunction();

三、函数防抖和节流的优化

函数防抖（Debouncing）和函数节流（Throttling）的实现可以进一步优化，以满足不同的需求和性能要求。下面是一些可能的优化方式：

函数防抖的优化：

立即执行：有时候，可能希望在事件触发时立即执行一次函数，然后再进行防抖延迟。这可以通过设置一个参数来实现。


function debounce(func, delay, immediate) {let timeoutId;return function (...args) {const context = this;const later = () => {timeoutId = null;if (!immediate) func.apply(context, args);};clearTimeout(timeoutId);if (immediate && !timeoutId) func.apply(context, args);timeoutId = setTimeout(later, delay);};
}

取消防抖：有时候，可能希望能够取消防抖，即立即执行函数并取消延迟。这可以通过返回一个取消函数来实现


function debounce(func, delay) {let timeoutId;function debounced(...args) {const context = this;const later = () => {timeoutId = null;func.apply(context, args);};clearTimeout(timeoutId);timeoutId = setTimeout(later, delay);}debounced.cancel = function () {clearTimeout(timeoutId);};return debounced;
}

函数节流的优化：

开始时立即执行：与函数防抖类似，可以添加一个参数，以便在时间间隔开始时立即执行一次函数。


function throttle(func, delay, immediate) {let canRun = true;return function (...args) {const context = this;if (immediate && canRun) {func.apply(context, args);canRun = false;}if (!immediate) {if (canRun) {canRun = false;setTimeout(() => {func.apply(context, args);canRun = true;}, delay);}}};
}

返回最后一次执行的结果：有时候，可能需要函数节流的同时返回最后一次执行的结果。


function throttle(func, delay) {let canRun = true;let lastResult;return function (...args) {const context = this;if (canRun) {lastResult = func.apply(context, args);canRun = false;setTimeout(() => {canRun = true;}, delay);}return lastResult;};
}