How to End setTimeout After User Input ? Last Updated : 04 Jan, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report To end setTimeout after user input, you can use the clearTimeout function. The clearTimeout() function in JavaScript clears the timeout which has been set by theĀ setTimeout() function before that. Syntax:clearTimeout(name_of_setTimeout);ApproachSet an initial countdown time (e.g., 5 seconds) and a variable for the timeout ID.Use setTimeout to decrement the countdown and update the display every second. Set a new timeout for the next second until the countdown reaches 0.Listen for a button click event (e.g., with the ID myButton).On button click(or on input or keypress etc), use clearTimeout to stop the countdown by clearing the timeout using the stored timeout ID.Example 1: In this example, we have followed the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timeout Example</title> <style> #myButton { cursor: pointer; } </style> </head> <body> <button id="myButton">Click me to clear timeout</button> <div id="output"></div> <script> document.addEventListener('DOMContentLoaded', function () { let countdown = 5; let timestamp; const updateCountdown = () => { document.getElementById('output') .innerHTML = `Timeout in ${countdown} seconds`; if (countdown === 0) { document.getElementById('output') .innerHTML = "Timeout completed!"; } else { timestamp = setTimeout(updateCountdown, 1000); } countdown--; }; updateCountdown(); document.getElementById('myButton') .addEventListener('click', () => { clearTimeout(timestamp); document.getElementById('output') .innerHTML = "Timeout cleared!"; }); }); </script> </body> </html> Output: Example 2: In this example, if we type something in the input box, Timer stops. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timeout Example with Text Input</title> <style> #textInput { margin-bottom: 10px; } </style> </head> <body> <input type="text" id="textInput" placeholder="Type to stop the timeout"> <div id="output"></div> <script> document.addEventListener('DOMContentLoaded', function () { let countdown = 5; let timestamp; const updateCountdown = () => { document.getElementById('output').innerHTML = `Timeout in ${countdown} seconds`; if (countdown === 0) { document.getElementById('output').innerHTML = "Timeout completed!"; } else { timestamp = setTimeout(updateCountdown, 1000); } countdown--; }; updateCountdown(); document.getElementById('textInput').addEventListener('input', (event) => { if (event.target.value.toLowerCase() !== '') { clearTimeout(timestamp); document.getElementById('output').innerHTML = "Timeout cleared!"; } }); }); </script> </body> </html> Output: Example 3: In this example, if we press(keydown event) the spacebar, timer stops. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timeout Example with Keydown Event</title> </head> <body> <div id="output"></div> <script> document.addEventListener('DOMContentLoaded', function () { let countdown = 5; let timestamp; const updateCountdown = () => { document.getElementById('output').innerHTML = `Timeout in ${countdown} seconds`; if (countdown === 0) { document.getElementById('output').innerHTML = "Timeout completed!"; } else { timestamp = setTimeout(updateCountdown, 1000); } countdown--; }; updateCountdown(); document.addEventListener('keydown', (event) => { if (event.code === 'Space') { clearTimeout(timestamp); document.getElementById('output').innerHTML = "Space bar is pressed and Timeout cleared!"; } }); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to wrap setTimeout() method in a promise ? A amanv09 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to set timeout for ajax by using jQuery? In web programming, the Ajax is used so that the resultant data is shown in the one part of the web page, without reloading the page. The user needs to perform the Ajax request and wants the result within a timeframe. In this scenario, the jquery timeout feature is used in the code. Session timeout 4 min read How to wrap setTimeout() method in a promise ? To wrap setTimeout in a promise returned by a future. We can wrap setTimeout in a promise by using the then() method to return a Promise. The then() method takes up to two arguments that are callback functions for the success and failure conditions of the Promise. This function returns a promise. Th 2 min read How to take user input in JavaScript? Interacting with users is the best way to create engaging and dynamic web applications. Taking user input allows your applications to be interactive and responsive. Here we will see the approach to take user input in JavaScript, specifically using the prompt method, which is perfect for beginners.Ap 3 min read How to Set Time Delay in JavaScript? Delaying the execution of code is a fundamental technique that is commonly used in JavaScript for tasks like animations, API polling, or managing time intervals between actions. JavaScript provides several built-in methods to set time delays: setTimeout() and setInterval(). We can set time delay in 2 min read Why we use setTimeout() function in Node.js ? The purpose of setTimeout function is to execute a piece of code after a certain interval of time. The setTimeout() function accepts two arguments. The first argument is a function and the second argument is time in milliseconds. The setTimeout() executes the function passed in the first argument af 2 min read How to debounce or throttle input changes in React? Debouncing and throttling are techniques used to limit the frequency of certain actions, particularly useful for handling input changes like those from user interactions. Debouncing:Imagine you have a text input field where users are typing. Each keystroke triggers some action, like filtering search 3 min read Like