防抖和节流

1. 防抖节流 的 异同

相同 :

  • 防抖和节流 是 高频触发事件,频繁回调函数时做的 性能优化,以节约请求资源,避免大量计算导致的页面卡顿/浏览器卡死;

不同 :

  • 防抖是将多次执行变为最后一次执行 – 频繁触发时,规定时间内,回调函数只能执行一次;
  • 节流是将多次执行变为在规定时间内只执行一次 – 节流会稀释函数的执行频率

防抖是控制次数,节流是控制频率

2. 防抖(debounce) 实现

非立即执行版 - 延时防抖

延时防抖的表现为:最后一次触发后间隔T后再调用函数

场景
输入搜索联想

思路

  1. 在第一次触发事件时,不立即执行函数,用setTimeout 延后n秒执行
  2. 如果n秒内再次触发滚动事件,那么取消当前计时器,重新开始计时
  3. 如果n秒内没有再次触发滚动事件,那么就执行函数
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
        }
    }
}

简化:

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}

防抖的问题

  • 如果在限定时间段内,不断触发滚动事件,只要不停止触发,理论上就永远不会触发回调函数

立即执行版

场景
按钮点击:收藏,点赞,心标等立即反馈的按钮,或者用于对于按钮防点击

思路

  1. 在第一次触发事件时,立即执行函数,然后创建一个定时器用setTimeout 延后n秒清除定时器
  2. 如果n秒内再次触发事件,那么取消当前计时器,重新开始计时/延时
  3. 如果n秒内没有再次触发滚动事件,延时结束后,且并不会执行回调函数
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
    	fn();   // 1.第一次进入立即执行
        if(timer){
       		clearTimeout(timer)//2. 有计时器,清除计时器
        }
        timer = setTimeout(()=>{  // 3. 重新创建一个定时器,n秒后清除定时器
        	timer = null;
        },delay) // 简化写法
    }
}

3. 节流(throttle) 实现

定时器版

用setTimeout + 开关 实现

思路

  1. 默认开关打开,在第一次触发事件时,关掉开关 + 用setTimeout 延后n秒执行
  2. 再次触发滚动事件,判断开关状态,关–退出函数,开的话-- 关掉开关 + 用setTimeout 延后n秒执行
  3. 如果n秒内没有再次触发滚动事件,那么就执行函数,打开开关
function throttle(fn,delay){
    let canRun = true
    return function() {
       if(!canRun){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间,执行函数并且在间隔期内把状态位设为无效
        canRun = false
        setTimeout(() => {
            fn()
            canRun = true;
        }, delay)
    }
}
/* 请注意,节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout,可以把状态位换成时间戳,然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在,如果存在表示还在冷却,并且在执行fn之后消除定时器表示激活,原理都一样
    */

// 以下照旧
window.onscroll = throttle(showTop,1000) 

时间戳版

function throttle(fn, delay) {
    let previous = 0;
    return function() {
        let now = Date.now();
        if (now - previous > delay) {
            fn.apply(this, arguments);
            previous = now;
        }
    }
}

补充:
setTimeout里 fn() 可以换为 fn.apply(this , arguments); 来解决this 指向 和 传参问题


参考:
浅谈js防抖和节流
什么是防抖和节流?有什么区别?如何实现?
函数防抖和节流
前端面试查漏补缺–(一) 防抖和节流
延时执行、立即执行防抖的不同实现

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值