一文让你秒懂防抖与节流

最新推荐文章于 2024-05-20 15:17:08 发布

Zhang zuo dong.

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量350

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_61151047/article/details/122080476

版权

一、函数防抖（debounce）

就是指触发事件后，在 n 秒内函数只执行最后一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

废话不多说，上代码展示

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
    //防抖函数
    function debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖函数，处理多次被触发的事件，只执行最后一次
    inputa.addEventListener('input', debounce(fn,1000))
</script>

我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

个人理解：函数防抖就是王者荣耀里英雄放技能的时候要有冷却，技能冷却没完再按技能就会重新计算冷却时间。

防抖使用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染

二、函数节流(throttle)

就是指连续触发事件，但是在 n 秒中只执行一次函数

废话不多说，上代码展示

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
//节流函数
function  throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}
    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖节流，无论你输入多块，每隔1秒钟执行一次
    inputa.addEventListener('input', throttle(fn,1000))
</script>

不管我们设定的执行时间间隔多小，总是1s内只执行一次。

个人理解：函数节流就是fps游戏（如穿越火线）的射速，就算一直按着鼠标射击，也只会在规定射击时间内射出一定子弹。

节流使用场景：

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

三、总结

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

博主博客会持续更新，敬请期待！

Zhang zuo dong.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一文让你秒懂防抖与节流

一、函数防抖（debounce）就是指触发事件后，在 n 秒内函数只执行最后一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间具体代码演示<body> <input type="text" id='unDebounce'></body></html><script> //防抖函数 function debounce(fn, delay) { var delay = delay ||
复制链接

扫一扫