在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 相关文章推荐
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
小程序实现搜索框功能
Mar 26 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
在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
PHP4之真OO
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
javascript每日必学之封装
2016/02/23 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python易忽视知识点小结
2015/05/25 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python如何代码集体右移
2020/07/20 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
初任培训自我鉴定
2013/10/07 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
跑吧孩子观后感
2015/06/10 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript