防抖和节流的介绍及实现

2022-08-18 21:02:48 阅读：150 来源： 互联网

标签：function 防抖节流 timer delay 介绍执行等待 fn

防抖

概述：在规定时间内只执行一次（执行最后一次）

举个例子：电梯关门案例

a 进入电梯等待5s后就可以上升了
在a等待了4s中后 b过来那么之前的等待就结束了开始新的等待
在b等待了3s后 c过来那么之前的等待也结束了开始新的等待
.... 直到最后一次等待结束电梯就上升（实际电梯上升这个操作只执行一次是最后一次）

防抖实现

//执行的函数  等待的时间
function debounce(fn,delay){
    var timer = null //记录有没有人在等
    return function(){
        if(timer) clearTimeout(timer) //有人等 上次等待清除
        timer = setTimeout(fn,delay) //开始新的等待
    }
}

示例

let fn = debounce(function(){
    console.log('移进去了');
},500)
//div移进只执行最后一次
document.querySelector('div').onmouseenter = function(){
    fn()
}

节流

概述：在一定时间范围内执行第一次（减少执行次数）

举个例子：高铁上厕所案例

当灯是绿灯的时候 a进去了这个灯变红灯
a 没有执行完的时候 b进不去只有当a 执行完把红灯变成绿灯 b才能进去
同样的 c也是一样的

节流代码实现

function throttle(fn,delay){
    var timer = null //默认没有人
    return function(){
        //判断当前是否有人
        if(timer) return //有人不做了 判断节流阀是否开启
        timer = setTimerout(()=>{
            fn()
            timer = null //做完了 将节流阀关闭
        },delay)
    }
}

示例

let fn = throttle(function(){
    console.log('移进去了');
},5000)
document.querySelector('div').onmouseenter = function(){
    fn()
}

标签：function,防抖,节流,timer,delay,介绍,执行,等待,fn
来源： https://www.cnblogs.com/toweiwei/p/16600087.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9