Javascript 仅在一定时间内执行单击而不累积事件

我试图使用本机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>
    );
  }
};

import React，{Component}来自'React'；
从“lodash/节流阀”进口节流阀；
类扩展组件{
状态={inputValue:”“}；
handleChange=（）=>{
this.changeState（）；
}
变更状态=油门(
newValue=>{
this.setState（{inputValue:newValue}）；
console.log（'executed！'）；
},
5000
);
render（）{
返回(
);
}
};

---

问题在于，方法changeState（）在5秒后成功执行，但根据您发送垃圾邮件的次数，它会立即再次执行。什么是防止这种情况发生的方法？

您想消除这种情况。当对函数进行解块时，它将仅在上次调用函数后的一定时间内执行该函数。如果它再次被调用，那么计时器将在执行之前重置。Lodash有一种去盎司方法。您希望将save方法取消抖动5000ms，然后在用户每次更改输入时调用该函数，如果用户停止键入5秒钟，则将调用save。以下是您要对lodash进行去盎司的文档。当对函数进行解块时，它将仅在上次调用函数后的一定时间内执行该函数。如果它再次被调用，那么计时器将在执行之前重置。Lodash有一种脱块法。您希望将save方法取消抖动5000ms，然后在用户每次更改输入时调用该函数，如果用户停止键入5秒钟，则将调用save。以下是lodash debounce的文档

您可以使用lodash进行此操作。

您可以使用lodash进行此操作。

将间隔移动到componentDidMount并将

此.state.inputValue

保存到本地存储

onChange

只需设置状态值

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

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

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value, changed: true });
  }

  componentDidMount() {
      this.interval = setInterval(()=> {
          if (this.state.changed === true) {
              // here save to the localStorage this.state.inputValue
              this.setState({ changed: false });
          }
      }, 5000);
  }

  componentWillUnmount() {
      clearInterval(this.interval);
  }

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

import React，{Component}来自'React'；
从“lodash/节流阀”进口节流阀；
类扩展组件{
状态={inputValue:，已更改：false}；
handleChange=（事件）=>{
this.setState（{inputValue:event.target.value，changed:true}）；
}
componentDidMount（）{
this.interval=setInterval（（）=>{
if（this.state.changed==true）{
//这里保存到localStorage this.state.inputValue
this.setState（{changed:false}）；
}
}, 5000);
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
返回(
);
}
};

将间隔移动到componentDidMount，并将

此.state.inputValue

保存到本地存储器

onChange

只需设置状态值

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

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

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value, changed: true });
  }

  componentDidMount() {
      this.interval = setInterval(()=> {
          if (this.state.changed === true) {
              // here save to the localStorage this.state.inputValue
              this.setState({ changed: false });
          }
      }, 5000);
  }

  componentWillUnmount() {
      clearInterval(this.interval);
  }

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

import React，{Component}来自'React'；
从“lodash/节流阀”进口节流阀；
类扩展组件{
状态={inputValue:，已更改：false}；
handleChange=（事件）=>{
this.setState（{inputValue:event.target.value，changed:true}）；
}
componentDidMount（）{
this.interval=setInterval（（）=>{
if（this.state.changed==true）{
//这里保存到localStorage this.state.inputValue
this.setState（{changed:false}）；
}
}, 5000);
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
返回(
);
}
};

您能否设置一个模块变量来跟踪它是否已被执行？e、 g.执行=假；如果设置为false，则仅在changeState处理程序中执行代码？显然，在执行时将其设置为true。也许有更好的方法来应对。没关系，看起来你收到的答案很合理。你能设置一个模块变量来跟踪它是否被执行吗？e、 g.已执行=错误；如果设置为false，则仅在changeState处理程序中执行代码？显然，在执行时将其设置为true。也许有更好的方法来应对。没关系，看来你得到的答案很合理