什么是防抖和节流

时间:2021-2-20 作者:admin

什么的防抖和节流?

防抖和节流是两种应对web页面中频繁触发事件的优化方案。

防抖 debounce

顾名思义,防抖就是防止抖动,避免事件的重复触发。
应用场景:

  1. 点击按钮事件,用户在一定时间段内的点击事件,为了防止和服务端的多次交互,我们可以采用防抖。
  2. 输入框的自动保存事件
  3. 浏览器的resize事件

总之,防抖可以概括为触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
根据以上概念,我们可以尝试一下实现一个防抖函数:

function debounce(fun,wait){
    let timer;
    return (...args)=>{
        if (timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            fun(...args);
        },wait)
    }
}
window.onresize = debounce(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候,控制台也只会打印一次1

节流 throttle

还是顾名思义,节流就是减少流量,将频繁触发的事件减少,并每隔一段时间执行。即,控制事件触发的频率。
应用场景:

  1. scroll事件,滚动的过程中每隔一段时间触发事件。(可见 如何实现图片的懒加载中的应用)

节流可以概括为高频事件触发,但在n秒内只会执行一次,节流会稀释函数的执行频率。 根据以上概念,我们可以尝试一下实现一个节流函数:

//利用时间间隔实现
function throttle1(fun,wait){
    let time1 = 0;
    return (...args)=>{
           const time2 = Date.now()
        const timeInterval = time2 - time1;
         if ( timeInterval < wait){
             return 
         }else {
            time1 = time2;
            fun(...args);
        }
    }
}
window.onresize = throttle1(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候,控制台会每隔1秒打印一次

//利用定时器实现
function throttle2(fun,wait){
    let timer;
    return (...args)=>{
        if (timer){
            return
        }else {
            timer = setTimeout(()=>{
                timer = null;
                fun(...args);
            },wait);
        }
    }
}
window.onresize = throttle2(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候,控制台会每隔1秒打印一次

总结:

防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
节流:高频事件触发,但在n秒内只会执行一次,节流会稀释函数的执行频率

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。