在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 concat数组累加 示例
Sep 03 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
js变量提升深入理解
Sep 16 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
WebRTC记录音视频流(web技术分享)
Feb 24 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开发需要注意的安全问题
2010/09/01 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PDO::rollBack讲解
2019/01/29 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS location几个方法小姐
2008/07/09 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
利用Python代码实现一键抠背景功能
2019/12/29 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python操作redis数据库的三种方法
2020/09/10 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
安全教育演讲稿
2014/05/09 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL