什么是防抖和节流?

Posted sunhang32

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是防抖和节流?相关的知识,希望对你有一定的参考价值。

防抖

解释定义

  • 防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行

  • 例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求

代码样例

function debounce(sayHi){
    var timer = null
    return function(){
        clearInterval(timer)
        timer = setTimeout(()=>{
            sayHi.apply(this,arguments)
        },1000)
    }
}
    
function sayHi(){
        console.log('防抖')
}
    
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖           

节流

解释定义

  • 节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发

  • 例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样)

代码样例

function chufa(fn){
    var flag = true
    return function(){
        if(!flag) return;
        flag = false
        setTimeout(()=>{
            fn.apply(this,arguments)
            flag = true
        },1000)
    }
}
    
function hansh(e){
    console.log(e.target.innerWidth, e.target.innerHeight);
}
        
window.addEventListener('resize',chufa(hansh))

以上是关于什么是防抖和节流?的主要内容,如果未能解决你的问题,请参考以下文章

第 47 题:什么是防抖和节流?

3什么是防抖和节流?有什么区别?如何实现?

ajax基础5--防抖和节流

lodash的防抖和节流方法

来聊聊JavaScript中的防抖和节流

JS基础-防抖和节流