js防抖节流随笔

首先清楚防抖节流的概念

防抖： 高频率事件在操作结束只执行最后一次

节流： 高频率事件某一段时间执行一次

防抖实现

function debounce(fn, time) {
    let timer
    return function(){
        var _that = this
        var arg = arguments
        // 高频率事件会在某个时间段内清除定时器，保证只执行最后一个
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.call(_that, ...arg)
        }, time)
    }
}

节流实现

function throttle(fn, time) {
    var flag = false
    return function() { 
        if (flag) return
        flag = true
        fn.call(this, ...argument)
        setTimeout(() => (flag = false), time)
    }
}

应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

1.搜索框搜索输入。只需用户最后一次输入完，再发送请求。

2.手机号、邮箱验证输入检测。

3.窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

1.滚动加载，加载更多或滚到底部监听。

2.高频点击提交，表单重复提交

参考链接：https://blog.csdn.net/w1418899532/article/details/98358491