setTimeout似乎越来越短

Question

I am writing a chatbot application and wanted to catch multiple user inputs by blurring out of the input field and focussing back in after 3 seconds (when the bot responded).

I used setTimeout for this and it works the first time but it seems to get shorter after calling the function multiple times.

The code I used is in a React chat widget and looks like this:

handleKeyPress = (e: KeyboardEvent) => {
    if (e.keyCode === 13 && this.input.value.replace(/\s/g, "")) {
        this.input.blur();
        this.say(this.input.value);
        // Reset input value
        this.input.value = "";
        this.refocus(document.getElementById('userText'));
    }
};

refocus = (element: HTMLElement) => {
    var time = setTimeout(function() {
        element.focus();
    }, 3000);
};

In this code I use a setTimeout after sending the message to the backend bot application so that the bot has some time to answer.

I can't figure out why this is not working and could really use some suggestions...

Answer 1

I found a fix for my issue. It appears that the problem had something to do with the focus() / blur() methods. I used a disable = true and disable = false and focus() after the 3 second delay and now the delay is always 3 seconds.

Code now looks like this:

handleKeyPress = (e: KeyboardEvent) => {
    if (e.keyCode === 13 && this.input.value.replace(/\s/g, "")) {
        this.input.disabled = true;
        this.say(this.input.value);
        // Reset input value
        this.input.value = "";
        this.enable((document.getElementById('userText') as HTMLInputElement));
    }
};

enable = (element: HTMLInputElement) => {
    setTimeout(function() {
        element.disabled = false;
        element.focus();
    }, 3000);
};