在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
更新時間:2019年11月13日 10:04:54 作者:FiveBigNiu
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
廢話不多說,直接上代碼吧!
/**
* 函數(shù)防抖 (只執(zhí)行最后一次點擊)
* @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);
}
};
/**
* 函數(shù)節(jié)流
* @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中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關于Vue中computed、methods與watch區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-04-04
vue 實現(xiàn)cli3.0中使用proxy進行代理轉(zhuǎn)發(fā)
今天小編就為大家分享一篇vue 實現(xiàn)cli3.0中使用proxy進行代理轉(zhuǎn)發(fā),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue數(shù)據(jù)傳遞--我有特殊的實現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03
vue腳手架配置預渲染及prerender-spa-plugin配置方式
這篇文章主要介紹了vue腳手架配置預渲染及prerender-spa-plugin配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05
el-dialog關閉再打開后窗口內(nèi)容不刷新問題及解決
這篇文章主要介紹了el-dialog關閉再打開后窗口內(nèi)容不刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02

