用户停止输入后运行功能

Question

我得到一个文本框，一旦用户停止键入，我想更新结果（他们键入的内容将应用于数据数组，并过滤​​掉与他们键入的内容匹配的任何内容）。

现在我正在使用onBlur，但是这当然只会在他们离开文本框后才激活。

最好做onChange并放置一个计时器，如果它们继续键入，该计时器将被取消？

或者，还有更好的方法。

不确定是否会有所作为，但我是reactjs

Answer 1

香草javascript（没有React ）

 var inputElm = document.querySelector('input'); inputElm.addEventListener('input', onInput); function onInput(){ var duration = 1000; clearTimeout(inputElm._timer); inputElm._timer = setTimeout(()=>{ update(this.value); }, duration); } function update(){ console.log('Do something') } 

 <input> 

在React中，您可能会这样：

class SomeComp extends Component {
    constructor(props){
        super(props);

        this.state = {
            inputValue: ''
        }
    }

    onInput = (e) => {
        var duration = 1000;
          clearTimeout(this.inputTimer);
          this.inputTimer = setTimeout(()=>{
            this.updateInputValue( e.target.value );
        }, duration);
    }

    updateInputValue = ( value )=> {
        this.setState({
            inputValue: value
        });
    }

    render(){
        return(
            <input value={this.state.inputValue} onChange={this.onInput(evt)}/>
        )
    }
}

Answer 2

只需使用onkeyup事件，它将在用户释放键盘按钮时触发。

document.getElementById('inputText').onkeyup = UpdateData()