问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在移动端，js如何禁止两个按钮被同时点击?

头像
heheheh
    336
    新手上路，请多包涵

    使用vue做了一个抽奖，分别为1连抽和5连抽，添加了loading变量防止按钮被短时间内被重复点击，但是同时点击1连抽和5连抽，会触发两次请求，如何避免？

    前端javascript
    阅读 1.1k
    avatarAI BotBETA

    为了防止这种情况，你需要使用一个全局变量（或某种状态）来跟踪当前的抽奖状态。当一个按钮被点击时，你可以设置这个状态为"正在加载"，然后在状态改变前禁止其他按钮的点击。以下是一个可能的实现。

    首先，你需要一个全局变量来表示当前的抽奖状态。我们可以使用一个简单的loading变量来实现：

    let loading = false;

    然后，你可以为每个按钮添加一个点击事件处理函数。在这些处理函数中，你可以检查loading变量是否为true。如果是，则可以阻止点击事件并显示一个加载消息。如果不是，则可以执行抽奖逻辑并设置loading为true，以防止其他按钮被点击：

    // 1连抽的按钮点击事件处理函数
handleClick1 = () => {
  if (loading) {
    // 显示加载消息或做其他处理
    return;
  }
  loading = true;
  // 执行1连抽的抽奖逻辑...
  // ...
  loading = false;
}

// 5连抽的按钮点击事件处理函数
handleClick5 = () => {
  if (loading) {
    // 显示加载消息或做其他处理
    return;
  }
  loading = true;
  // 执行5连抽的抽奖逻辑...
  // ...
  loading = false;
}

    请注意，这种方法只在一个页面中有效。如果你有多个页面，你可能需要在每个页面上复制这个逻辑，或者使用一个全局状态管理器（如 Vuex）来管理这个状态。

    1 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542

      使用一个全局变量就可以了:

      // 1连抽的按钮点击事件处理函数
handleClick () => {
  if (loading) return;
  loading = true;
// 处理逻辑
  loading = false;
}

// 5连抽的按钮点击事件处理函数
handleClick5 () => {
  if (loading) return
  loading = true;
// 处理逻辑
  loading = false;
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题