防抖节流函数封装

为什么引入防抖和节流

防抖 debounce

防抖函数封装：

//DOM元素
<input id="input1" type="text">

//js代码
const input1 = document.getElementById('input1') 
function debounce(fn,delay){
    let timer=null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer=setTimeout(() => {
            //模拟触发change事件
            fn.apply(this,arguments)
            // 清空计时器
            timer=null
        }, delay);
    }
}
input1.addEventListener('keyup', debounce(()=>{
    console.log(input1.value)
},500))

防抖：当持续触发事件时，指定时间（自定义）没有再触发事件，事件处理函数才会执行一次。如果小于指定。时间触发事件，事件处理函数不会被执行，而是以最后一次触发的事件，重新计算，即：最后时间点后指定时间，触发事件。
通俗理解：停止动作后（时间点）+ 自定义时间（延迟）=> 触发事件

节流 throttle

节流函数封装：

//DOM元素
<div id="div1" draggable="true" style="width:100px;height:100px;background:pink">可拖拽</div>

//js代码
const div1 = document.getElementById('div1')
function throttle(fn,delay=100){
    let timer=null
    return function(){
        if (timer) {
            return
        }
        timer=setTimeout(() => {
            fn.apply(this,arguments)
            timer=null
        }, delay);
    }
}
div1.addEventListener('drag', throttle(function (e){
    console.log(e.offsetX, e.offsetY)
}, 200))

节流：当持续触发事件时，每隔指定时间触发一次事件处理函数。当然，是你触发事件的时间小于你设置的每隔指定时间。
通俗解决：“匀速等距离”触发事件处理函数。