javascript - 仅执行一定时间的点击而不累积事件

Question

我正在尝试使用 native javascript localstorage api (或 npm 上的任何 React 本地存储模块)将输入字段保存到本地存储，但在实现保存到本地存储的代码时遇到了一些麻烦距离最后输入的字母至少有 5 秒的间隔。

import React, { Component } from 'react';
import throttle from 'lodash/throttle';

class Something extends Component {
  state = { inputValue: "" };

  handleChange = () => {
    this.changeState();
  }

  changeState = throttle(
    newValue => {
      this.setState({ inputValue: newValue });
      console.log('executed!');
    },
    5000
  );

  render() {
    return (
      <div>
        <input type="text" 
          value={this.state.inputValue} 
          placeholder="Type something here" 
          onChange={this.handleChange} 
        />
      </div>
    );
  }
};

问题在于，changeState() 方法在 5 秒后成功执行，但随后会根据您垃圾邮件的点击次数再次执行。有什么方法可以防止这种情况发生？

Answer 1

你想要去抖。当您对函数进行反跳操作时，它只会在上次调用该函数后的一定时间内执行该函数。如果再次调用它，则计时器在执行之前重置。 Lodash 有一个去抖方法。您希望将 save 方法反跳 5000 毫秒，然后在每次用户更改输入时调用该函数，然后如果他们停止输入 5 秒，就会调用 save。以下是 lodash debounce 的文档 https://lodash.com/docs/4.17.4#debounce