JavaScript

超轻量级php框架startmvc

在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

更新时间:2020-09-22 19:00:01 作者:startmvc
废话不多说,直接上代码吧!/***函数防抖(只执行最后一次点击)*@paramfn*@paramdelay*@returns{Funct

废话不多说,直接上代码吧!


/**
 * 函数防抖 (只执行最后一次点击)
 * @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中使用防抖和节流,防止重复点击或重复上拉加载实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

vue 防抖 节流 重复点击 上拉加载