当前位置：首页 > article >正文

防止重复点击方法总结-微信小程序

article 2025/3/22 15:40:24

在微信小程序中，防止重复点击的通用方法可以通过以下几种方式实现：
1. 使用 disabled 属性
在点击事件中，通过设置 disabled 属性来禁用按钮，防止用户重复点击。

<button bindtap="handleClick" disabled="{{isDisabled}}">点击</button>

Page({
  data: {
    isDisabled: false
  },
  handleClick: function() {
    if (this.data.isDisabled) return;
    this.setData({ isDisabled: true });
    // 模拟异步操作
    setTimeout(() => {
      // 操作完成后恢复按钮状态
      this.setData({ isDisabled: false });
    }, 2000);
  }
});

2. 使用标志位
在点击事件中，通过设置一个标志位来防止重复点击。

<button bindtap="handleClick">点击</button>

Page({
  data: {
    isProcessing: false
  },
  handleClick: function() {
    if (this.data.isProcessing) return;
    this.setData({ isProcessing: true });
    // 模拟异步操作
    setTimeout(() => {
      // 操作完成后恢复标志位
      this.setData({ isProcessing: false });
    }, 2000);
  }
});

3. 使用 wx.showLoading 和 wx.hideLoading
在点击事件中，使用 wx.showLoading 显示加载动画，并在操作完成后隐藏加载动画。

<button bindtap="handleClick">点击</button>

Page({
  handleClick: function() {
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    // 模拟异步操作
    setTimeout(() => {
      wx.hideLoading();
    }, 2000);
  }
});

4. 使用防抖函数
通过防抖函数来限制点击事件的触发频率。

<button bindtap="handleClick">点击</button>

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}
Page({
  handleClick: debounce(function() {
    // 处理点击事件
    console.log('点击事件触发');
  }, 1000)
});

5. 使用 Promise 和 async/await
通过 Promise 和 async/await 来确保异步操作完成前不会重复触发点击事件。

<button bindtap="handleClick">点击</button>

Page({
  isProcessing: false,
  async handleClick() {
    if (this.isProcessing) return;
    this.isProcessing = true;
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.isProcessing = false;
  }
});