I'm in the process of setting up an input filter for a text box, which would execute a specific function that would refresh a display, based on state value of the input box.

I've been confused between setTimeout and setInterval and how to actually implement this, as it needs to do a couple of things:

1. Timer needs to start on key press (or in this case, onChange event called, with the function name)
2. If timer hits a specific value (say 2000 for 2 seconds), it terminates and executes the another function.
3. The timer should refresh if the onchange event is fired again (a new character is input triggering the onChange again).
4. It's part of a class component.

I'm having a hard time finding anything relevant to what I am trying to do, and what I got with setInterval so far, had been a looping timer that doesn't trigger an out.

Snippet of relevant code and comments:

    handleTextFilterInput = (event) => {
        /** Track input change **/
        const target = event.target;
        const fieldName = target.name;
        const value = target.value;

        let newFilterValues = {...this.state.filterValue};
        newFilterValues[fieldName] = value;

        this.setState({
            filterValue: newFilterValues,
        });


        /**
         * initialize setInterval()/setTimeout() 
         * 
         * Check if timer is active. If it is, refresh it
         * 
         * When the timer reaches value, do this.functionHere once.
         *
         **/
    };