在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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Element的el-tree控件后臺數(shù)據(jù)結構的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺數(shù)據(jù)結構的生成以及方法的抽取,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue解決使用$http獲取數(shù)據(jù)時報錯的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼
這篇文章主要介紹了electron + vue項目實現(xiàn)打印小票功能,需要的朋友可以參考下2018-11-11
用vue的雙向綁定簡單實現(xiàn)一個todo-list的示例代碼
本篇文章主要介紹了用vue的雙向綁定簡單實現(xiàn)一個todo的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08
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
Vue+element-ui 實現(xiàn)表格的分頁功能示例
這篇文章主要介紹了Vue+element-ui 實現(xiàn)表格的分頁功能示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

