什么是防抖和节流?手写一个防抖函数和节流函数?

1.防抖(debounce)

  当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

  当你频繁触发后,n秒内只执行一次。

复制代码
function test() {
     console.log('防抖')
}
window.addEventListener(
'mousemove', debounce(test, 1000)); function debounce(func, wait) {//核心代码 var timer, wait = +wait || 0; return function () { var context = this var args = arguments timer ? clearTimeout(timer) : func.apply(context, args); timer = setTimeout(function () { func.apply(context, args) }, wait); } }
复制代码

2.节流(throttle)

  当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

  在固定的时间内触发事件,每隔n秒触发一次

复制代码
function throttle(func, wait) {//核心代码
    var timer,
    wait = +wait || 0;
    return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
            func.apply(context, args)
            timer = setTimeout(function () {
                timer = null;
            }, wait)
        }
    }
}
复制代码

 应用场景:

搜索框搜索时,用户在不断输入值时,用防抖来节约请求资源。
频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器
登录按钮或者其他什么按钮,用户鼠标不断点击触发,mousedown(单位时间内只触发一次)
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

posted @   腓腓无忧  阅读(198)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示