为了防止重复,或者恶意点击查询接口,可以对方法进行定时拦截,在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(){
......
},
}