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

 更新时间:2019年11月13日 10:04:54   作者:FiveBigNiu  
今天小编就为大家分享一篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

相关文章

  • 解决vue多层弹框时存在遮挡问题

    解决vue多层弹框时存在遮挡问题

    本文给大家介绍vue多层弹框时存在遮挡问题,解决思路首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误,下面给大家带来一种正确的思路,一起看看吧
    2022-03-03
  • Vue.js学习笔记之修饰符详解

    Vue.js学习笔记之修饰符详解

    本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue-router3.0版本中 router.push 不能刷新页面的问题

    vue-router3.0版本中 router.push 不能刷新页面的问题

    这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue项目中请求数据特别多导致页面卡死的解决

    vue项目中请求数据特别多导致页面卡死的解决

    这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 一文彻底教会你在vue中写jsx

    一文彻底教会你在vue中写jsx

    以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue 点击删除常用方式小结

    vue 点击删除常用方式小结

    这篇文章主要介绍了vue 点击删除常用方式小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • SSM VUE Axios详解

    SSM VUE Axios详解

    Axios是在前端开发中常用的一个发送 HTTP 请求的库,用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下
    2021-10-10
  • TypeScript中集成Tween.js踩坑记录

    TypeScript中集成Tween.js踩坑记录

    这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 关于elementUi表格合并行数据并展示序号

    关于elementUi表格合并行数据并展示序号

    这篇文章主要介绍了关于elementUi表格合并行数据并展示序号,通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,感兴趣的朋友可以学习一下
    2023-04-04

最新评论