首页 > Web开发 > 详细

js防抖节流随笔

时间:2021-03-29 20:40:22      阅读:31      评论:0      收藏:0      [点我收藏+]

首先清楚防抖节流的概念

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

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

防抖实现

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防抖节流随笔

原文:https://www.cnblogs.com/95xdy/p/14593567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!