Uniapp点击按钮防抖操作

最新推荐文章于 2024-08-08 15:58:10 发布

T-腾腾

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量2.2k

点赞数

分类专栏： Uniapp 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_50832030/article/details/124356793

版权

Uniapp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript创建一个防止多次点击的功能，通过在组件的data中设置noClick标志，并在点击事件中控制该标志，确保每个操作在2秒内只能执行一次。此功能可以用于提交按钮等场景，避免因用户快速连续点击导致的多次请求。同时，提供了两种调用方式：一种是不带参数的直接调用方法，另一种是传递参数的方法。

摘要由CSDN通过智能技术生成

一、在根目录下新建common文件并创建common.js文件，输入下面代码

 // 防止处理多次点击
 function noMultipleClicks(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 {
     noMultipleClicks,//禁止多次点击
 }

 1 // 防止处理多次点击
 2 function noMultipleClicks(methods, info) {
 3     // methods是需要点击后需要执行的函数， info是点击需要传的参数
 4     let that = this;
 5     if (that.noClick) {
 6         // 第一次点击
 7         that.noClick= false;
 8         if(info && info !== '') {
 9             // info是执行函数需要传的参数
10             methods(info);
11         } else {
12             methods();
13         }
14         setTimeout(()=> {
15             that.noClick= true;
16         }, 2000)
17     } else {
18         // 这里是重复点击的判断
19     }
20 }
21 //导出
22 export default {
23     noMultipleClicks,//禁止多次点击
24 }

二、man.js文件引入

 //配置公共方法
 import common from './common/common.js'
 Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

三、在实际页面中引用，不带参数,直接传一个方法就行

  //记得在data中挂载   noClick:true
  data() {
      return {
          noClick:true,
      }
  },
  
  <view class="bottom-btn-box">
      <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
 </view>
 
 methods:{
     commitWork(){
         //balabala
     }           
 }

四、在实际页面中引用，带参数,传一个方法和一个参数就行

//记得在data中挂载   noClick:true
data() {
    return {
        noClick:true,
     }
},
 <view class="bottom-btn-box">
    <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
  </view>
 
 methods:{
     goPay(item){
         //balabala
     }           
 }