防抖和节流

一、概念上的区分

都是用来控制某个函数在一定时间内触发次数，减少触发频率来提高性能，避免资源浪费。
1.防抖
触发事件n秒内函数只执行一次，如果n秒内又触发了时间则重新计算函数的执行时间。
比如：当我们在输入框输入时会触发某个事件，但是不想打一个字就触发一次，就可以使用防抖，在5秒内没输入就触发，如果5秒内又输入了就重新计算，知道5秒内没有输入才触发事件。

2.节流
节流就是连续触发事件但是n秒内只执行一次，会稀释函数的执行次数，控制高频事件执行次数
比如：在页面上鼠标上下滑动时触发某个事件，但是因为一直在滑动触发的太过频繁，可以5秒触发一次。

二、手写代码

一般我们会将这两个函数封装起来，哪里用传参使用，而不是哪里需要写哪里。面试题中也经常考到。
1.防抖

    let timeId=null
    return function (){
        if(timeId==null){
            clearTimeout(timeId)
        }
        timeId=setTimeout(()=>{
            fn.call(this)
        },delay)
    }
}

//获取输入框的值
let inp=document.querySelector("input")
inp.oninput=debounce(function(){
    console.log(this.value)
},500)

2.节流

function throttle(fn,delay){
    let canUse=true
    return function(){
        if(canUse){
            fn.call(this)
            canUse=false
            setTimeout(()=>{canUse=true},delay)
        }
    }
}

//滚动条触发
window.onscroll=throttle(function(){
    console.log("滚动了")
},500)