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

Question

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

Answer 1

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

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

Answer 2

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

首先，你需要一个全局变量来表示当前的抽奖状态。我们可以使用一个简单的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）来管理这个状态。