JavaScript 中按钮控制中防止重复点击的实现

---

JavaScript 中按钮控制：防止重复点击的实现

在现代 web 开发中，用户交互是一个重要的方面。特别是在执行需要网络请求的操作时，比如提交表单或调用 API，防止用户重复点击按钮显得尤为重要。本文将介绍如何使用 JavaScript 实现这一功能，并提供代码示例。

为什么要防止重复点击？

1. 避免多次请求：用户可能因为网络延迟多次点击按钮，从而导致发送多次相同的请求，造成服务器负担。
2. 提升用户体验：通过禁用按钮，可以明确告诉用户操作正在进行中，增强交互反馈。
3. 数据一致性：确保系统状态在处理请求时保持一致，避免因重复操作带来的数据错误。

实现步骤

我们将通过创建一个按钮并为其添加事件监听器来演示如何防止重复点击。在这个例子中，我们假设按钮用于向后端发送任务请求。

1. 创建按钮

首先，我们需要在 HTML 中创建一个按钮元素，并在 JavaScript 中为其添加事件处理程序。

<div id="buttonList"></div>

2. 编写 JavaScript 代码

以下是完整的 JavaScript 示例代码，展示了如何实现以上功能：

// 假设 taskList 是一个包含任务信息的数组
const taskList = [
    { id: 1, modelProcessName: '任务1' },
    { id: 2, modelProcessName: '任务2' },
    // 更多任务...
];

// 获取按钮容器
const buttonList = document.getElementById('buttonList');

// 遍历数据，创建按钮
taskList.forEach(item => {
    const button = document.createElement('button'); // 创建按钮元素
    button.textContent = item.modelProcessName; // 设置按钮名称

    // 设置按钮事件
    button.onclick = () => {
        // 禁用按钮，防止重复点击
        button.disabled = true;

        const agvTaskId = item.id; // 获取“任务ID”
        const callSystemNumber = "JCPT"; // 设置“调用平台编码”

        // 调用接口
        fetch('http://127.0.0.1:8888/agv/api/addTask', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ agvTaskId: agvTaskId, callSystemNumber: callSystemNumber })
        })
        .then(response => response.json())
        .then(data => {
            console.log("data", data);
            console.log("data.code", data.code);

            if (data.code === 0) {
                alert('任务已下发');
                fetchTaskRecords(ipadId); // 假定这是另一个函数，用于获取任务记录
            } else {
                alert(data.message);
            }
        })
        .catch((error) => {
            console.error('错误:', error);
        })
        .finally(() => {
            // 不论成功与否，任务完成后重新启用按钮
            button.disabled = false;
        });
    };

    buttonList.appendChild(button); // 将按钮添加到页面上
});

3. 代码解析

• 创建按钮：使用 document.createElement('button') 创建按钮元素，并设置其文本内容。
• 添加事件监听：为按钮的 onclick 事件指定一个函数，该函数负责处理按钮点击后的逻辑。
• 禁用按钮：在事件处理函数内，点击按钮后立即将其禁用，以防止重复点击。
• 发送请求：使用 fetch API 向后端发送 POST 请求，携带必要的参数。
• 处理响应：根据服务器返回的数据，进行相应的提示和处理。
• 恢复按钮状态：在 .finally() 方法中，无论请求成功与否，都将按钮重新启用。

总结

通过上述方法，我们可以有效防止用户在请求未完成时重复点击按钮。这不仅提高了应用的稳定性，也改善了用户体验。在实际开发中，您可以根据需求进一步扩展此功能，例如添加加载指示器或按钮状态切换效果，以提供更好的交互体验。