1 Matching Annotations
- May 2022
-
-
In order to execute an event listener (or any function for that matter) after the user stops typing, we need to know about the two built-in JavaScript methods setTimeout(callback, milliseconds) and clearTimeout(timeout): setTimeout is a JavaScript method that executes a provided function after a specified amount of time (in milliseconds). clearTimeout is a related method that can be used to cancel a timeout that has been queued.
Step 1. Listen for User Input
<input type="text" id="my-input" />
let input = document.querySelector('#my-input'); input.addEventListener('keyup', function (e) { console.log('Value:', input.value); })
Step2: Debounce Event Handler Function
let input = document.getElementById('my-input'); let timeout = null;
input.addEventListener('keyup', function(e) { clearTimeout(timeout);
timeout = setTimeout(function() { console.llog('Input Value:', textInput.value); }, 1000); })
-