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


Posted in Javascript onNovember 13, 2019

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

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

Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jquery 插件开发备注
Aug 27 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
一文了解Vue中的nextTick
May 06 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
在vue-cli中引入lodash.js并使用详解
Nov 13 #Javascript
vue 解除鼠标的监听事件的方法
Nov 13 #Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 #Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
You might like
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
Jquery 实现图片轮换
2015/01/28 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python实现串口通信的示例代码
2020/02/10 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
delegate与普通函数的区别
2014/01/22 面试题
运动会闭幕式解说词
2014/02/21 职场文书
合作协议书
2014/04/23 职场文书
2014年冬季防火方案
2014/05/21 职场文书
市场推广策划方案
2014/06/02 职场文书
初级党校心得体会
2014/09/11 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
党内外群众意见范文
2015/06/02 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript