javaScript实现待办列表删除功能：基于勾选状态和时间限制的优化方法

大家好，今天我要和大家分享一个关于待办列表管理的小技巧。在我们日常使用待办列表时，经常会遇到已完成的事项需要手动删除的情况。但是我们可能会出现误勾选的情况，需要马上取消勾选，所以当待办事项在一定时间内状态未发生变化时，系统才会将其删除。示例如下：

由示例可知，当用户勾选后，我们并没有马上将该条记录删除，而是等待几秒后用户没有更改后才删除，如果用户取消勾选，那么该条记录将不会被删除。

实现步骤

1、当用户点击勾选框时，调用删除方法，传递两个参数select和id

参数说明：

• select（boolean类型）：表示待办事项是否被勾选。
• id（number类型）：待办事项的唯一标识。

2、判断删除索引列表是否为空

• 如果删除索引列表（deleteIndexList）不为空，遍历该列表。
• 如果列表中已存在当前待办事项的id，则更新其勾选状态（select）。
• 如果列表中不存在当前待办事项的id，则将其添加到删除索引列表中。

3、清除定时器

• 如果已存在定时器（timer），则清除该定时器，避免重复执行。

4、设置定时器

• 创建一个新的定时器，设置延迟时间为3000毫秒（3秒）。
• 定时器到期后，遍历删除索引列表，筛选出勾选状态为true的待办事项。
• 使用filter方法从待办列表（listData）中移除这些待办事项。
• 最后，清空删除索引列表，为下一次操作做准备。

代码实现：

deleteListItem(select, id) {
  if(this.deleteIndexList.length) {
    this.deleteIndexList.forEach((ite) => {
      if(ite.id == id) {
        ite.select = select
      } else {
        this.deleteIndexList.push({
          id,
          select
        })
      }
    })
  } else {
    this.deleteIndexList.push({
      id,
      select
    })
  }

  if (this.timer) {
    clearTimeout(this.timer)
  }
  this.timer = setTimeout(() => {
    this.deleteIndexList.forEach((ite) => {
      if(ite.select) {
        this.listData = this.listData.filter(item => {
          return item.id != ite.id
        })
      }
    })
    this.deleteIndexList = []
  }, 3000)
}

希望这个方法能对大家有所帮助，如果有什么疑问或建议，欢迎在评论区留言交流！