当显示引导模式时，函数会多次运行。香草js

当遇到“显示引导模式时，函数会多次运行”的问题时，通常是因为事件监听器被多次绑定到了同一个元素上，或者是在某些异步操作完成后重复执行了相同的函数。这种情况在前端开发中比较常见，尤其是在使用JavaScript框架（如Vue、React等）或者直接操作DOM时。

基础概念

事件监听器：事件监听器是用于响应特定事件的函数。当事件被触发时，监听器中的代码会被执行。

重复绑定：如果一个元素上绑定了多个相同的事件监听器，那么每次事件触发时，这些监听器都会被执行。

优势

• 灵活性：事件监听器允许开发者根据不同的事件执行不同的操作。
• 解耦：事件监听器有助于实现代码的模块化和解耦。

类型

• 一次性事件监听器：只触发一次的事件监听器。
• 持久性事件监听器：每次事件触发时都会执行的事件监听器。

应用场景

• 用户交互：如按钮点击、表单提交等。
• 数据更新：如WebSocket消息接收、定时任务等。

问题原因

1. 多次绑定：在代码的不同部分重复绑定了相同的事件监听器。
2. 异步操作：在异步操作（如Ajax请求、setTimeout等）完成后重复执行了相同的函数。

解决方法

1. 检查绑定位置：确保事件监听器只绑定一次。
2. 使用一次性事件监听器：如果只需要执行一次，可以使用一次性事件监听器。
3. 解绑事件监听器：在不需要时手动解绑事件监听器。

示例代码

以下是一个简单的示例，展示如何避免重复绑定事件监听器：

// 错误的示例：多次绑定事件监听器
document.getElementById('myButton').addEventListener('click', handleClick);
document.getElementById('myButton').addEventListener('click', handleClick);

function handleClick() {
  console.log('Button clicked!');
}

// 正确的示例：只绑定一次事件监听器
document.getElementById('myButton').addEventListener('click', handleClick);

function handleClick() {
  console.log('Button clicked!');
}

参考链接

• MDN Web Docs: addEventListener

通过以上方法，可以有效避免在显示引导模式时函数多次运行的问题。确保事件监听器只绑定一次，并在不需要时及时解绑，可以有效提高代码的性能和可维护性。