執行一個點擊只需一定的時間而不會累積事件

Question

我試圖利用本地javascript本地存儲api（或任何反應本地存儲模塊npm）保存到本地存儲的輸入字段，但有一個在最後一次鍵入的字母間隔至少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> 
    ); 
    } 
}; 

的問題是，該方法改變狀態（）後5秒內成功執行，但隨後系統會根據你有多少點擊垃圾郵件在它再次執行。什麼是防止這種情況的方法？

Answer 1

你想反彈。當你反彈一個函數時，它只會在最後一次被調用後的一定時間內執行函數。如果它再次被調用，那麼定時器在執行之前會重置。 Lodash有一個反彈方法。您想要將保存方法去除5000ms，然後每次用戶更改輸入時調用該函數，然後如果他們停止輸入5秒鐘，則會調用保存。這裏是文件lodash反彈https://lodash.com/docs/4.17.4#debounce

Answer 2

你可以使用lodash debounce()爲此。

Answer 3

將您的間隔移至componentDidMount並將this.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> 
    ); 
    } 
};