Задержка, сбрасываемые задержки функций

Question

Я работаю над приложением TODO в React и пытаюсь встроить функциональность, которая задержит удаление отмеченного элемента на 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>
    );
  }

Answer 1

Сохранить ключ в состояние при проверке.Используйте этот ключ в функции внутри setTimeout и удаляйте, только если ключ не изменен между проверкой и тайм-аутом.

Ключ должен быть чем-то, что не будет одинаковым в разное время, поэтому вы можете использоватьинкрементное число или что-то простое, например, текущее время Unix new Date().valueOf()

Если элемент проверен дважды, вторая проверка перезапишет ключ, что приведет к сбою временного удаления первой проверки при сравнении ключей.

handleToggle = value => () => {
  const { checked, keys } = this.state;
  const currentIndex = checked.indexOf(value);
  const newChecked = [...checked];
  const newKeys = [...keys];
  const key = new Date().valueOf();

  if (currentIndex === -1) {
    newChecked.push(value);
    newKeys[value] = key;
  } ...

  this.setState({
    checked: newChecked,
    keys: newKeys
  });

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

Не забудьте инициализировать this.state.keys пустым объектом.