In order to run a function after a specific delay, we use
Timeouts can be cancelled using
clearTimeout() and passing the ID of the timeout in question. In the above example, to prevent our applicating from printing
lol, we could set up a button which called
If you want to call a function repeatedly,
setInterval() is the more appropriate tool. It looks very similar:
As with timeouts, we can run
clearInterval() to call a halt to proceedings when we are done with it.
Imagine a searchbox that offers suggestions as you type. On each
keydown event, a function is run that makes a network request. If the user enters a long query quickly, the browser (and remote server!) may quickly become overwhelmed and end up feeling unresponsive.
To overcome this, we can implement
setTimeout() in order to debounce the event: we prevent it from happening too often.
Instead of calling the function on each keypress, we wait for an opportune moment - perhaps a slight pause. When events occur closer than our timeout delay, the timeout from the previous keypress is cancelled and a new one is executed.