Vue方法使用防抖和节流

红太狼 2023-10-07 20:32 7阅读 0赞

最简单的一种：直接使用lodash封装好的工厂函数：

//  _为自己命名
    import _ from 'lodash'
    
    // debounce 防抖
    方法名:_.debounce(function(传递参数){
            //具体方法
          },300),
    
    // throttle 节流
    方法名:_.throttle(function(传递参数){
            //具体方法
          },300),

会返回一个新的函数，直接在vue的methods中使用:

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

或者：

methods:{
    queryList() {
          return _.debounce(() => {
            // 函数体
          }, 500)()
        }
    }

自己封装一个防抖和节流的工具类：

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

然后在vue中引入并使用：

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

![3d0a9295e602494d85476eee8f2867e3.png][]

[3d0a9295e602494d85476eee8f2867e3.png]: https://img-blog.csdnimg.cn/3d0a9295e602494d85476eee8f2867e3.png