uni-app click event anti-shake to avoid repeated operations

Create a new utils file in the root directory and create an antiShake.js file

/**
 * @methods 函数
 * @info 参数
 */
function antiShake(methods, info) {
    
    
    // methods是需要点击后需要执行的函数， info是点击需要传的参数
    let that = this;
   if (that.noClick) {
    
    
        // 第一次点击
        that.noClick= false;
        if(info && info !== '') {
    
    
            // info是执行函数需要传的参数
           methods(info);
       } else {
    
    
           methods();
       }
       setTimeout(()=> {
    
    
           that.noClick= true;
       }, 2000)
   } else {
    
    
       // 这里是重复点击的判断
   }
}

export default {
    
    antiShake}

Because it is used more directly into the global main.js

import utils from './utils/antiShake'
Vue.prototype.$antiShake = utils.antiShake

page use

• The first one does not set parameters

<template>
  <view class="content">
    <button type="primary" @click="$antiShake(login)">防抖</button>
  </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
		  noClick:true, //按钮防抖设置
    };
  },
  methods: {
    
    
    login() {
    
    
      console.log('1')
    }
  },
};
</script>

The second setting parameter

<template>
  <view class="content">
    <button type="primary" @click="$antiShake(login, 100)">防抖</button>
  </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
		  noClick:true, //按钮防抖设置
    };
  },
  methods: {
    
    
    login(e) {
    
    
      e // 接收参数
      console.log(e)
    }
  },
};
</script>