延迟,可重置功能延迟

我正在React中开发一个todo应用程序,并尝试内置功能,该功能将延迟X秒删除选中的项,如果在该时间内未选中该框,则不会删除该框。

我遇到的主要问题是当用户在相同的X秒内选中、取消选中和重新检查所有内容时。所需的功能是,如果要选中,计时器将启动、取消选中并重置计时器,请再次选中新计时器启动。现在计时器继续计时,因此如果x=5,那么如果选中,则在5秒内取消选中并重新选中所有项,该项将很快被删除。

  handleToggle = value => () => {
    const { checked } = this.state;
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    this.setState({
      checked: newChecked
    });

    new Promise((resolve, reject) => {
      setTimeout(
        () =>
          resolve(
            this.state.checked.includes(value) ? Store.delete(value.id) : false
          ),
        3000
      );
    });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List>
          {Store.get().map(item => (
            <ListItem
              key={item.id}
              role={undefined}
              dense
              button
              className={classes.listItem}
            >
              <Checkbox
                onClick={this.handleToggle(item)}
                checked={this.state.checked.indexOf(item) !== -1}
                tabIndex={-1}
                disableRipple
              />
              <TextField
                id={item.id}
                className={classes.textField}
                value={item.value}
                onChange={this.handleChange(item)}
                margin="normal"
              />
            </ListItem>
          ))}
        </List>
      </div>
    );
  }