如何在JS中实现定时器，完成Trello类任务清单站点的任务定时消失功能

核心实现逻辑 #

• 使用JS内置的setTimeoutAPI实现延迟执行，该方法接收两个参数：要执行的回调函数、延迟时间（单位为毫秒）
• 每个新增任务单独绑定独立的定时器，避免全局变量冲突，到期后直接删除对应的任务DOM节点即可

完整可运行代码 #

let todos = document.querySelector('ul')
let form = document.querySelector('form')
let todoInput = document.querySelector("[name='todo']")
// 任务默认留存时间，单位：秒
const TASK_EXPIRE_SECONDS = 80

function addTodos(todoText) {
  const li = document.createElement('li')
  const button = document.createElement('button')
  li.innerHTML = todoText
  button.innerHTML = "done"
  todos.appendChild(li)
  li.appendChild(button)
  
  // 给当前任务绑定定时删除逻辑
  setTimeout(() => {
    li.remove()
    // 如果有全局存储todo数组的需求，这里也可以同步删除对应数据
  }, TASK_EXPIRE_SECONDS * 1000)
}

form.onsubmit = (event) => {
  event.preventDefault();
  if (todoInput.value.trim()) {
    addTodos(todoInput.value)
    todoInput.value = '' // 提交后清空输入框
  }
}

注意事项 #

• 不要使用全局唯一的计时器变量控制所有任务，多任务场景下会出现计时混乱
• 定时器的时间单位为毫秒，需要把秒数乘以1000转换后再传入
• 如果需要实现倒计时显示，可以给每个任务节点添加倒计时文本，配合setInterval每秒更新剩余时间，到期后再清除定时器并删除节点

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