防抖函数的核心是延迟执行函数并在延迟内重新计时，确保事件停止触发后才执行，适用于搜索建议、窗口调整等场景；1. func.apply(context, args)用于绑定this上下文和传递参数，确保函数在正确上下文中执行；2. 使用apply而非func(...args)是为了精确控制this值，尤其在事件处理中保持上下文一致；3. 立即执行的防抖通过immediate参数和callnow判断实现首次触发立即执行；4. 防抖与节流的区别在于防抖是“最后一次有效”，节流是“周期内只执行一次”；5. 节流可通过时间戳或requestanimationframe实现，后者更契合浏览器渲染节奏，提升性能；6. 选择依据：防抖用于停止后执行，节流用于持续中定期执行，根据场景需求决定。
防抖函数的核心在于，延迟执行一个函数，如果在延迟时间内再次触发，则重新计时。这样可以避免函数被频繁调用，提高性能。
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}防抖的核心在于，当事件被触发时，不是立即执行事件处理函数，而是给出一个延迟时间。如果在延迟时间内，事件再次被触发，就重新计算延迟时间。只有在延迟时间结束后，才会执行事件处理函数。
如何理解
func.apply(context, args)？
func.apply(context, args)允许你显式地设置函数执行时的
this值（即
context）以及传递给函数的参数（通过
args数组）。
-
context
: 指定func
函数执行时的this
值。 如果context
是null
或undefined
，非严格模式下this
会指向全局对象（例如浏览器中的window
），严格模式下this
会是undefined
。 在上面的debounce
函数中，context
被设置为this
，这样可以确保在防抖后的函数执行时，this
指向的是触发事件的元素或者组件。
args
: 一个数组或者类数组对象，包含了要传递给func
函数的参数。 在debounce
函数中，args
使用了剩余参数语法 (...args
) 来收集所有传递给防抖函数的参数，然后将它们作为一个数组传递给func
。
示例:
function myFunction(arg1, arg2) {
console.log("arg1:", arg1, "arg2:", arg2);
console.log("this:", this);
}
const myObject = {
name: "My Object"
};
// 使用 apply 调用 myFunction，并设置 this 为 myObject，传递两个参数
myFunction.apply(myObject, [10, 20]);
// 输出:
// arg1: 10 arg2: 20
// this: {name: 'My Object'}为什么要使用
apply而不是直接调用
func(...args)？
虽然
func(...args)看起来更简洁，但在某些情况下，
apply提供了更强的灵活性。 主要区别在于对
this值的控制。
apply允许你明确地设置
this的值，这在处理事件监听器、类方法等场景时非常重要，因为你可能需要确保函数在正确的上下文中执行。
防抖函数有哪些应用场景？
输入框搜索建议: 当用户在输入框中输入内容时，如果每次输入都发起搜索请求，会给服务器带来很大的压力。使用防抖函数，可以在用户停止输入一段时间后，才发起搜索请求，减少请求次数。
窗口大小调整: 当窗口大小调整时，可能会触发一些重新布局的操作。使用防抖函数，可以在窗口大小调整结束后，才执行重新布局的操作，避免频繁的布局计算。
按钮点击: 防止用户快速连续点击按钮，导致重复提交数据。
如何实现立即执行的防抖函数？
function debounce(func, delay, immediate) {
let timeoutId;
return function(...args) {
const context = this;
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null; // 清除 timeoutId
if (!immediate) {
func.apply(context, args);
}
}, delay);
if (callNow) {
func.apply(context, args);
}
};
}这段代码的关键在于
immediate参数。如果
immediate为
true，则在第一次触发时立即执行函数。
callNow变量用于判断是否应该立即执行。
timeoutId = null在定时器结束后被赋值，是为了确保下次调用时
callNow能正确判断。
防抖函数和节流函数有什么区别？
防抖函数是在一段时间内，只执行一次函数。如果在该时间内再次触发，则重新计时。而节流函数是在一段时间内，最多执行一次函数。无论在该时间内触发多少次，都只执行一次。
简单来说，防抖是“最后一次算数”，节流是“一段时间内只算一次”。
手写一个节流函数：
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const context = this;
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(context, args);
lastTime = now;
}
};
}这个节流函数通过记录上一次执行的时间
lastTime，并在每次调用时检查当前时间与
lastTime的差值是否大于等于
delay。如果是，则执行函数并更新
lastTime。这样就保证了在
delay时间内，函数最多执行一次。
使用
requestAnimationFrame实现节流有什么好处？
使用
requestAnimationFrame的节流函数，可以更好地适应浏览器的渲染机制，避免不必要的重绘和回流，从而提高性能。
function throttle(func) {
let waiting = false;
return function(...args) {
const context = this;
if (!waiting) {
waiting = true;
requestAnimationFrame(() => {
func.apply(context, args);
waiting = false;
});
}
};
}requestAnimationFrame会在浏览器下一次重绘之前执行传入的回调函数。这意味着，只有在浏览器准备好更新屏幕时，才会执行节流函数。这可以避免在短时间内多次执行函数，从而减少 CPU 和 GPU 的消耗。
如何选择防抖函数和节流函数？
- 防抖: 适用于只需要在事件停止触发后执行一次的场景，例如输入框搜索建议、窗口大小调整等。
- 节流: 适用于需要在一段时间内定期执行的场景，例如滚动事件、鼠标移动事件等。
选择哪个函数取决于具体的应用场景和需求。如果需要确保在事件停止触发后执行一次，则选择防抖函数。如果需要在一段时间内定期执行，则选择节流函数。
