防抖与节流

大白话理解防抖与节流

防抖：
应用场景：当我们在一个input框中进行输入时，如果不设置防抖函数，则我们每个输入一个字符，就会向后台发送一次请求，非常消耗性能；
实现：

function debounce(fn, delay) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
}
inputDom.addEventListener('input', debounce(() => {
    console.log('发送请求')
}, 500))

节流：
应用场景：当我们把一个盒子设置为可以拖拽时，拖动盒子时向后台发送请求，则每拖动一次，就会向后台发送很多次请求，这样也是很消耗性能的，我们则可以通过手写节流函数，实现每200ms或一段时间内，向后台发送一次请求；
实现：

function throttle(fn) {
    let timer = null
    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn()
            timer = null
        }, 1000)
    }
}
div1.addEventListener('drag', throttle(function (e) {
    console.log('test')
}))

相同点：
两者都是为了控制一个事件在一定时间内的触发次数，都是为了减少触发频率，以提高性能，避免造成资源浪费；毕竟操作dom非常耗费性能的；