Wait for User to Stop Typing, in JavaScript

The immensely useful lodash library comes with a debounce utility you can use for this.

https://lodash.com/docs/4.17.15#debounce

import { debounce } from 'lodash';

input.addEventListener('keyup', debounce(handleInputChange, 1000));

it's much more scalable to write time-dependent code like this in a reactive stream library like RxJS or Bacon.

Rx example:

    Rx.fromEvent(input, 'keyup') // stream of keyup events
      .pipe(map(e => e.target.value)) // map to stream of values
      .pipe(debounceTime(1000)) // debounce the stream
      .subscribe(value => console.log('text', value));

this scales linearly with the addition of time-dependent features - say you want to map that value stream into an API request ie a Promise, but you want to only have the latest Promise actually write to your output in case an earlier request took longer to complete and finished after the latest one. That goes like this:

    Rx.fromEvent(input, 'keyup') // stream of keyup events
      .pipe(map(e => e.target.value)) // map to stream of values
      .pipe(debounceTime(1000)) // debounce the stream
      .pipe(switchMap(value => axios.get(`${API}/endpoint`))) // switchMap is like a stream version of flatMap, but only uses the latest result
      .subscribe(response => setState({ results: response.data }));

you can do things like that with plain JS, but it gets convoluted very quickly.

you can do a lot of clever stuff with this stream manipulation. I've managed to build some complex pieces of drag and drop UI in a few lines of code using Rx and React.

I use this technique all the time. One caveat, though: if you're doing ajax calls inside that callback (ie for an autocomplete), you _also_ want to cancel those at the same time you clearTimeout(). Browsers only do so many XHR requests at a time, so depending on timing (how fast the typist is, how fast the request is, etc) , this can queue up lots of unnecessary requests if you don't also cancel previous requests..