防抖(debounce)

连续触发相同事件，每一次触发事件，前面的事件都会被取消，执行当前此触发。防抖会执行最后一次事件的触发

    <button>按钮</button>
    <script>
        function debounce() {
            let timer = null
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log(new Date())
                }, 500)
            }
        }
        let fun=debounce()
        let btn=document.querySelector('button')
        btn.onclick=fun
    </script>

}

节流（throttle）

在规定时间内会执行一次，不管触发事件多少次，都会按照程序规定的节奏来执行

<button>按钮</button>
    <script>   
        function throttle(){
            let timer=null
            return function(){
                if(timer){
                    return
                }
                timer=setTimeout(()=>{
                    console.log(new Date())
                    timer=null
                },500)
            }
        }
        let fun=throttle()
        let btn=document.querySelector('button')
        btn.onclick=fun
    </script>

区别

连续快速点击500次，delay设置成500ms.===>防抖只会执行一次，而节流会执行（操作总时间ms/500ms）次

场景

标题
防抖	搜索框的联想词条
节流	滚动条，连续点击