用户停止输入后运行功能

Question

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

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

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

还是有更好的方法。

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

Answer 1

Vanilla 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()