JS 防抖节流

小书_

已于 2023-01-31 15:48:12 修改

阅读量121

点赞数

文章标签： javascript 前端开发语言

于 2022-10-28 21:06:01 首次发布

本文链接：https://blog.csdn.net/weixin_61501067/article/details/127578954

版权

防抖（debounce）

触发高频事件后n秒内只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，可用于输入框输入事件。

<body>
    input: <input type="text" id="inp">
    <script>
        let inp = document.getElementById('inp');
        inp.addEventListener('input', debounce(function (e) {
            console.log('inp', e.target.value, this.value);
        }, 1000));

        function debounce(f, delay = 500) {
            let timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    // 箭头函数没有arguments对象，所以这里的arguments指向外层匿名函数的arguments对象，this引用的是定义箭头函数的上下文
                    f.apply(this, arguments);
                }, delay);
            }
        }
    </script>
</body>

节流（throttle）

高频事件触发，但在n秒内只会执行一次，所以节流会降低事件的执行频率，可用于屏幕滑动加载事件。

<body>
    <script>
        window.addEventListener('scroll', throttle(function (e) {
            console.log(e);
        }, 1000));

        function throttle(f, delay = 500) {   
            let timer;
            return function () {
                if (timer) return;
                timer = setTimeout(() => {
                    f.apply(this, arguments);
                    timer = null;
                }, delay);
            }
        }
    </script>
</body>

防抖和节流都是基于高阶函数的简单应用，降低触发事件的频率，减少不必要的消耗。