JavaScript-节流与防抖

面试中经常问的问题，防抖与节流，在此延申有可能到闭包，要做好准备
谈谈你所理解的闭包

节流

当持续触发事件的时候，保证一段时间内，只调用一次事件处理函数
在规定的间隔时间内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

<div>
    <button>dianji</button>
</div>
<script>
    function throttle(func, delay) {
        let timer
        // 闭包
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    func()
                    timer = null
                }, delay)
            }
        }
    }
    let button = document.querySelector('button')
    // 注意这里绑定的是函数
    button.onclick = throttle(() => {
        console.log("发送请求");
    }, 2000)
</script>

🍓我们可以发现无论点击多块，输出都以一定的频率输出

防抖

当持续触发事件唉，一定时间内没有触发事件，事件处理函数才会执行一次
如果在设定到来之前 又一次触发了事件 就重新开始延时

<div>
    <input type="text">
</div>
<script>
    function debounce(delay) {
        let timer
        // 闭包,也可以直接挂载到全局对象上，但是用闭包更好
        return function (value, callback) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                callback(value)
            }, delay)
        }
    }
    // 函数柯里化
    let debounceFunc = debounce(1000)
    let input = document.querySelector('input')
    input.addEventListener('keyup', (e) => {
        debounceFunc(e.target.value, (value) => {
            console.log(value);
        })
    })
</script>

🍓我们可以发现，知道输入完毕，才会输出结果

总结

🌰我们平时玩游戏，我们可以把放技能理解成节流，点的再快，也是有冷却时间的
🌰防抖则是类似于回城

解决办法及应用场景

🌰引入第三方包

lodash官方文档

🌰应用场景

🌰 debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
🌰 throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断