减少Ajax请求ReactJS Slider

Question

我期待在React中实现Accepted Answer Version 3。基本上，不是每次更改滑块时都进行更新，而是定期更新。我目前有一个解决方案，更新每一个变化..

class SliderForm extends React.Component { 
    handleInputChange(e) { 
    // run ajax request with e.target.value 
    } 

    render() { 
    return (
     <div> 
     <input type="range" value={this.props.value_to_update} onChange={this.handleInputChange.bind(this)} /> 
     </div> 
    ) 
    } 
} 

任何帮助，非常感谢。

Answer 1

您可以尝试debouncing您的处理程序函数，将其限制为仅在特定时间范围内执行一次。

使用underscore的debounce功能，你可以尝试这样的事：

class SliderForm extends React.Component { 
    constructor() { 
     this.handleInputChange = _.debounce(this.handleInputChange.bind(this), 1000); 
    } 

    handleInputChange(e) { 
     // run ajax request with e.target.value 
    } 

    render() { 
     return (
      <div> 
       <input type="range" value={this.props.value_to_update} onChange={this.handleInputChange} /> 
      </div> 
     ); 
    } 
}