Call A Javascript Function After 5 Sec Of Last Key Press

Have you ever wanted to trigger a JavaScript function after a specific period of no key presses on your webpage? It's a common need in web development to perform actions after a user pauses typing. In this how-to article, we'll dive into how you can achieve this goal easily with a simple JavaScript function.

To begin, we'll create a JavaScript function that will be called after 5 seconds of the last key press by the user. Let's name our function `callAfterKeyPress`.

Javascript

let typingTimer;
const delayTime = 5000; // 5 seconds in milliseconds

function callAfterKeyPress() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(() =&gt; {
        // Your code to execute after 5 seconds of no key press
        console.log('User has stopped typing for 5 seconds!');
    }, delayTime);
}

document.addEventListener('keydown', () =&gt; {
    callAfterKeyPress();
});

Our `callAfterKeyPress` function sets a timer using `setTimeout` that triggers its action after 5 seconds of inactivity. With `clearTimeout(typingTimer)`, any previously set timers are cleared on each key press, ensuring our function is only called after the specified duration of no key presses.

By attaching an event listener to `keydown`, we continue reset the timer every time a key is pressed, effectively restarting the 5-second countdown. This ensures the function is not triggered if the user continues typing within the 5-second window.

Now let's go through a practical example of how you can use this concept in a real scenario. Suppose you have a search field on your website and you want to fetch search results after a user stops typing for 5 seconds to reduce unnecessary API requests.

Html

Javascript

const searchInput = document.getElementById('search');

function fetchSearchResults() {
    // Simulate fetching search results
    console.log('Fetching search results...');
}

searchInput.addEventListener('input', callAfterKeyPress);

function callAfterKeyPress() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(() =&gt; {
        fetchSearchResults();
    }, delayTime);
}

In this example, as the user types in the search input field, `fetchSearchResults` function will be called 5 seconds after the last key press, optimizing the search experience by waiting for a short pause before triggering the search request.

Using this approach, you can enhance user interaction and optimize resource usage on your web applications. Experiment with this functionality and adapt it to suit your specific project needs. Happy coding!

Related posts:

Contact Info