在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
更新时间:2019年11月13日 10:04:54 作者:FiveBigNiu
今天小编就为大家分享一篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
废话不多说,直接上代码吧!
/**
* 函数防抖 (只执行最后一次点击)
* @param fn
* @param delay
* @returns {Function}
* @constructor
*/
export const Debounce = (fn, t) => {
let delay = t || 500;
let timer;
console.log(fn)
console.log(typeof fn)
return function () {
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
/**
* 函数节流
* @param fn
* @param interval
* @returns {Function}
* @constructor
*/
export const Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};
用法
...
methods:{
getAliyunData:Throttle(function(){
...
},1000),
}
...
以上这篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Element的el-tree控件后台数据结构的生成以及方法的抽取
这篇文章主要介绍了Element的el-tree控件后台数据结构的生成以及方法的抽取,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-03-03
vscode中prettier和eslint换行缩进冲突的问题
这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue3+vite+vant项目下按需引入vant报错Failed to resolve import的原因及解决
这篇文章主要给大家介绍了关于vue3+vite+vant项目下按需引入vant报错Failed to resolve import的原因及解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
让webpack+vue-cil项目不再自动打开浏览器的方法
今天小编就为大家分享一篇让webpack+vue-cil项目不再自动打开浏览器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09


最新评论