vue 防抖函数的实现

为了防止重复，或者恶意点击查询接口，可以对方法进行定时拦截，在1秒内重复点击只访问一次接口，在网上找了很多关于防抖节流的方法基本如出一辙，我对其中一个进行了改造

// tools.js

let timeout = null;
function VueDebounce(fnName, time, that) {

    return function() {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            that[fnName]();
        }, time);

    };
}

该方法我也是在网上复制的方法，原创是将

let timeout = null; 放在了VueDebounce方法里面，但一直没有效果，原因是每次访问方法时都将timeout 设置为了null，所有if一直没有生效，也就是点多少次返回多少次，将timeot放在外面就可以解决了，也有很多同学说this指向问题，于是我把this也传进来了

页面上调用

    methods: {   

        //搜索
        selectList(){

            this.tools.VueDebounce('getList',1000,this)();

        },
        // 获取后台数据
        getList(){

            ......

        },
    }