防抖函数的核心是延迟执行函数并在延迟内重新计时，确保事件停止触发后才执行，适用于搜索建议、窗口调整等场景；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 的消耗。
如何选择防抖函数和节流函数？
防抖: 适用于只需要在事件停止触发后执行一次的场景，例如输入框搜索建议、窗口大小调整等。节流: 适用于需要在一段时间内定期执行的场景，例如滚动事件、鼠标移动事件等。
选择哪个函数取决于具体的应用场景和需求。如果需要确保在事件停止触发后执行一次，则选择防抖函数。如果需要在一段时间内定期执行，则选择节流函数。
以上就是js中如何实现防抖函数的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517505.html
微信扫一扫 
支付宝扫一扫 
