javascript - 延迟、可重置功能延迟

Question

我正在 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>
    );
  }

Answer 1

保存一个键进入检查时的状态。在setTimeout内部的函数中使用这个key，只有在检查和超时之间该key没有变化的情况下才删除。

key 必须是在不同时间不会相同的东西，因此您可以使用递增数字或简单的东西，例如当前的unix时间new Date().valueOf()

如果一个item被检查了两次，第二次检查会覆盖key，从而导致第一次检查的定时删除在比较key时失败。

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。