在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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
Vue.js中的组件系统
May 30 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
在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 array_walk() 数组函数
2011/07/12 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Django框架模板介绍
2019/01/15 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python圣诞树编写实例详解
2020/02/13 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
中专三年学习的个人自我评价
2013/12/12 职场文书
经典洗发水广告词
2014/03/13 职场文书
假释思想汇报范文
2014/10/11 职场文书
西安兵马俑导游词
2015/02/02 职场文书
留学推荐信英文范文
2015/03/26 职场文书
redis中lua脚本使用教程
2021/11/01 Redis