JavaScript：如何实现点击仅触发一次函数调用？问题排查

嘿，这个问题我之前做项目时也踩过坑！核心就是要避免每次点击按钮都重复执行DOM插入逻辑，给你几个纯JavaScript的实用方案，按需选择就行：

方案1：渲染前清空目标容器（最通用） #

每次点击时先把存放待办列表的容器内容清空，再重新渲染整个列表。这样不管点多少次，都是覆盖式更新，不会出现重复元素。适合待办数据可能动态变化的场景。

示例代码：

// 模拟待办数据
const todoItems = [
  '完成JS练习',
  '整理文档',
  '健身30分钟'
];

function renderTodos() {
  // 获取存放列表的容器
  const todoContainer = document.getElementById('todo-list');
  // 关键：先清空容器
  todoContainer.innerHTML = '';
  
  // 循环创建并添加待办项
  todoItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    todoContainer.appendChild(li);
  });
}

// 绑定按钮点击事件
document.getElementById('show-todos-btn').addEventListener('click', renderTodos);

方案2：标记是否已渲染（适合仅需展示一次） #

设置一个变量标记列表是否已经渲染过，点击时先检查这个标记，只有未渲染时才执行插入逻辑。

示例代码：

let hasRendered = false;
const todoItems = ['买菜', '遛狗', '交电费'];

function renderTodos() {
  if (hasRendered) return; // 已渲染过就直接返回
  
  const todoContainer = document.getElementById('todo-list');
  todoItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    todoContainer.appendChild(li);
  });
  
  hasRendered = true; // 标记为已渲染
}

document.getElementById('show-todos-btn').addEventListener('click', renderTodos);

方案3：使用一次性点击事件（仅触发一次） #

给按钮绑定点击事件时，设置once: true选项，这样按钮只会响应一次点击，之后再点击不会触发事件处理函数。

示例代码：

const todoItems = ['看书', '写博客', '打扫房间'];

function renderTodos() {
  const todoContainer = document.getElementById('todo-list');
  todoItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    todoContainer.appendChild(li);
  });
}

// 关键：添加{ once: true }参数
document.getElementById('show-todos-btn').addEventListener('click', renderTodos, { once: true });

方案4：检查容器是否已有待办项 #

渲染前先判断容器里是否存在待办元素，比如通过类名或子元素数量判断，存在就不执行插入逻辑。

示例代码：

const todoItems = ['开会', '回复邮件', '更新代码'];

function renderTodos() {
  const todoContainer = document.getElementById('todo-list');
  // 检查是否已有待办项（比如检查是否有.todo-item类的元素）
  if (todoContainer.querySelector('.todo-item')) return;
  
  todoItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    li.classList.add('todo-item');
    todoContainer.appendChild(li);
  });
}

document.getElementById('show-todos-btn').addEventListener('click', renderTodos);

你可以根据自己的需求选：如果需要每次点击都更新最新的待办数据，方案1最适合；如果只需要展示一次列表，方案2、3、4都可以~

内容的提问来源于stack exchange，提问作者javascript2016