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 timer
    return function() {
        var _this = this
        var arg = arguments
        if (!timer) {
            setTimeout(() => {
                timer = null
                fn.call(_that, arg)
            }, time)
        }
    }
}

应用场景


函数防抖的应用场景

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

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

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

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

函数节流的应用场景

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

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

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

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

js防抖节流随笔

上一篇:WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件


下一篇:百度ueditor编辑器多图上传,全部显示一样的图片,BUG,解决方案