防抖和节流有什么区别

防抖主要用于输入框，当输入框停止输入后在执行相应的代码逻辑，节流主要用于拖拽，滚动，当鼠标滚动在规定的时间内触发一次事件，下面我们上代码

防抖

function debounce(fn, delay = 200) {
    let timer = 0
    return function () {
        if (timer) clearTimeout(timer)

        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = 0
        }, delay)
    }
}
const input1 = document.getElementById('input1')
input1.addEventListener('keyup', debounce(() => {
    console.log('发起收缩', input1.value);
}))

节流

function throttle(fn, delay = 200) {
    let timer = 0
    return function () {
        if (timer) return

        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = 0
        }, delay)
    }
}
const div1 = document.getElementById('div1')
div1.addEventListener('keyup', throttle((e) => {
    console.log('鼠标的位置',e.offsetX,e.offsetY);
}))