What is a function to debounce?
There is an interesting paragraph on the Internet that explains the function chattering phenomenon:
Suppose you are going up in an elevator and, just before the doors close, you see that someone else wants to take the elevator. As a courtesy, you push the door opener and wait for him to get in. If someone else arrives before the elevator doors close, you keep opening the door. And so on and so on, you might have to wait for a few minutes until no one finally gets in, then you close the door and go upstairs.
** So debounce will not be executed until a certain amount of time has passed since the call action has been triggered, and the time interval will be recalculated if the call action is called again within this time interval.
For example:
During development, the most common scenario is dealing with entering values in input fields to prevent jitter:
According to the input
<input type=text oninput="ontextInput(event)" value=0 /> Display input <span id="inputContent"></span> <script> function ontextInput(e){ let value=e.target.value; clearTimeout(timer); let timer=setTimeout(function(){ $("#inputContent")[0].textContent.textContent=value; }, 500); } </script>Copy the code