节流防抖函数（Marksheng）

蔚落 2022-12-27 01:44 226阅读 0赞

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

那么在 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";

*  1

在 methods 中使用

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

# 应用： #

### 函数防抖(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>

看一下运行结果：  
![在这里插入图片描述][20201015173809499.gif_pic_center]  
可以看到，我们只要输入一个字符，就会触发这次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>

![在这里插入图片描述][20201015174537411.gif_pic_center]  
我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

> 个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。

### 函数节流(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>

![在这里插入图片描述][20201015175105775.gif_pic_center]

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

> 个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

### 总结 ###

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

## 结合应用场景 ##

**debounce**

*  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
 *  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

**throttle**

*  鼠标不断点击触发，mousedown(单位时间内只触发一次)
 *  拖拽事件，每拖动1px都会触发onmousemove（可以用throttle优化，每秒触发一次）
 *  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

[20201015173809499.gif_pic_center]: /images/20221120/ae2878a9e362437ebdec80685503964b.png
[20201015174537411.gif_pic_center]: /images/20221120/09fd92fdf15b4b47ba1bd2e51c08d052.png
[20201015175105775.gif_pic_center]: https://img-blog.csdnimg.cn/20201015175105775.gif#pic_center