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

作者:FiveBigNiu 时间:2024-05-22 10:28:01 

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


/**
* 函数防抖 (只执行最后一次点击)
* @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),
}
...

来源:https://blog.csdn.net/qq_34764577/article/details/82952368

标签:vue,防抖,节流,重复点击,上拉加载
0
投稿

猜你喜欢

  • Python实现读取文件夹按数字排序功能

    2023-08-24 02:12:45
  • python flask项目打包成docker镜像发布的过程

    2021-06-28 17:38:21
  • SQL Server中的SELECT会阻塞SELECT吗

    2024-01-25 18:08:30
  • 解决TensorFlow训练模型及保存数量限制的问题

    2022-08-06 08:22:27
  • 网站数据库,是选SQL Server还是Access好

    2008-05-23 13:19:00
  • Python迭代用法实例教程

    2021-07-18 13:00:45
  • 各种鼠标经过图片边框加粗效果整理

    2007-09-29 21:43:00
  • MySQL自定义函数和存储过程示例详解

    2024-01-27 15:25:02
  • 在Python中append以及extend返回None的例子

    2021-05-12 10:33:34
  • SQL Server中带有OUTPUT子句的INSERT,DELETE,UPDATE应用

    2024-01-14 02:58:03
  • Python open读写文件实现脚本

    2022-08-23 00:26:46
  • Keras中的两种模型:Sequential和Model用法

    2021-10-16 07:04:32
  • django创建自定义模板处理器的实例详解

    2022-07-29 19:50:00
  • 中文段首不需要空两格

    2010-04-23 20:31:00
  • python3 最常用的三种装饰器语法汇总

    2021-10-10 15:08:12
  • widows下安装pycurl并利用pycurl请求https地址的方法

    2023-07-09 03:21:18
  • Python pip安装lxml出错的问题解决办法

    2021-11-17 07:36:07
  • 在PHP中使用redis

    2024-05-13 09:22:41
  • 深入解析JavaScript中的arguments对象

    2024-05-09 14:50:44
  • python实现画桃心表白

    2021-05-14 16:27:00
  • asp之家 网络编程 m.aspxhome.com