函数节流、函数防抖

最新推荐文章于 2025-06-10 09:45:49 发布

zhangxlY~

最新推荐文章于 2025-06-10 09:45:49 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/m0_57142556/article/details/118002289

函数节流、函数防抖

首先，我们要知道：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。

一、它们的基本概念如下：

函数节流：在一定时间内js方法只跑一次(比如人的眨眼睛，就是一定时间内眨一次)。这是函数节流最形象的解释;
函数防抖：指频繁触发的情况下，只有足够的空闲时间，才执行代码一次(比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车)；

===============================================================================================================================

二、两者的区别

函数防抖和函数节流都是防止某一时间频繁触发，但是它们的原理不一样；
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行；

===============================================================================================================================

三、使用节流防抖函数(性能优化)

在 vue 中的使用：

第一步：在公共方法中（如 untils.js 中），加入函数防抖和节流方法：

// 防抖
export 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);
    };
}
// 节流
export 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);
        }
    }
}

第二步：

在需要使用的组件引用:    import { _debounce } from "@/utils/public";

第三步：

在 methods 中使用：

methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

===============================================================================================================================================================================

四、应用

(1)函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。


<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内只执行一次。

(2)函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

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

<script>

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

以下是运行结果：

由此可见：我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。

接下来是优化：

<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>

看一下效果：