美文网首页vue
Vue给所有的点击按钮做防抖

Vue给所有的点击按钮做防抖

作者: 辉夜真是太可爱啦 | 来源:发表于2021-08-09 19:20 被阅读0次

src 下新建 mixins 文件夹,其中新建 debounce.js 在其中写入以下代码:

export default {
  data(){
    return{
      debounceTimer:null,
    }
  },
  methods:{
    debounceMethods(func,...args){
      let context = this;
      if (this.debounceTimer) clearTimeout(this.debounceTimer);
      let callNow = !this.debounceTimer;    //是否立即执行
      this.debounceTimer = setTimeout(() => {
        this.debounceTimer = null;
      },1000)
      if(callNow) func.apply(context,args)
    }
  }
}

然后在 main.js 中进行引用

import Vue from 'vue';
import debounce from '../src/mixins/debounce'

Vue.mixin(debounce)

改写原本的点击方式,例如本来的方式

@click="save(item,index)"

传参直接写入方法的后面即可

@click="debounceMethods(save,item,index)"

相关文章

  • Vue给所有的点击按钮做防抖

    在 src 下新建 mixins 文件夹,其中新建 debounce.js 在其中写入以下代码: 然后在 main...

  • js防抖和节流

    节流(按钮点击) 防抖(搜索)

  • 项目常用代码

    节流 } 防抖 } 页面滚动(requestAnimationFrame) vue全局点击防抖

  • 函数节流与函数防抖

    函数节流 适用场景:按钮防重复点击 函数防抖 适用场景:input输入框搜索

  • 神兵利器--RxBinding,用的就是你

    为什么要使用RxBinding,如下场景: 点击防抖 原始实现方式 使用用RxBinding 监听某按钮多次点击,...

  • Android | 使用 AspectJ 限制按钮快速点击(一)

    前言 在Android开发中,限制按钮快速点击(按钮防抖)是一个常见的需求; 限制快速点击的实现方法有很多种,这篇...

  • 「React Native」防重复点击

    一、防快速重复点击。 点击按钮后,立马将按钮设置为不可点击,按钮置灰,1.5秒后,重新可以点击。二、防网络请求重复...

  • 概念书面解读

    防抖和节流 防抖:触发高频事件后n秒内只执行一次,如果n秒内再次触发,则重新计算时间,多用于按钮防止重复点击 in...

  • RxJava防抖

    应用场景 快速多次点击按钮,就会提交多次事件。 一次普通的点击事件 打印结果: 使用RxJava防抖 添加依赖: ...

  • 防抖和节流理解

    防抖和节流都是某段时间间隔之内执行一次,但是具体表现不一样;防抖:点击按钮后500毫秒没有在点击过,则触发事件,否...

网友评论

    本文标题:Vue给所有的点击按钮做防抖

    本文链接:https://www.haomeiwen.com/subject/wixtbltx.html