Why declare the timeout ID outside the callback of the mocking function?

Question

This is a function that prints in the console what I type in the input.

I would like to understand why, when I declare the ID of the setTimeout (in that case called time) outside the function, it functions as a deboning function, but if I declare within the function, it keeps sending several requests and does not work?

Script that works:

let time
document.querySelector('input').addEventListener('keyup', function(event) {
    clearTimeout(time)
    time = setTimeout(() => {
        console.log(event.target.value)
    }, 1500) 
})

Script that does not work:

document.querySelector('input').addEventListener('keyup', function(event) {
    clearTimeout(time)
    let time = setTimeout(() => {
        console.log(event.target.value)
    }, 1500) 
})

Answer 1

Notice that you, before creating a new timeout (using the setTimeout), must remove the timeout previous using the function clearTimeout.

Let’s take the example of code that nay works:

document.querySelector('input').addEventListener('keyup', function(event) {
  clearTimeout(time);
  let time = setTimeout(() => {
    console.log(event.target.value);
  }, 1500);
});

Note that, in this code, there are two problems:

• The only reference to the id of timeout (which in your code is called time) is within the function of callback. Like the callback runs for each event keyup, you will always create a new timeout and, since the callback "end", you will no longer have reference to his ID, since it was lost within the scope of the function that, at that time, is no longer executed.

• The clearTimeout comes before the declaration of time in itself. This causes a mistake, since, as time is created at each event, it has not yet been created when clearTimeout tries to access it. Because of this, you will have a ReferenceError.

That way, you have to keep up the ID of the last timeout created so that the next Event Handler can clean it. One way to do this is to keep the variable time out of of callback (how does your code work):

let time; // <--- Note que a variável é externa ao callback.
document.querySelector('input').addEventListener('keyup', function(event) {
  clearTimeout(time);
  time = setTimeout(() => {
    console.log(event.target.value);
  }, 1500);
});

Now, as we declare time out of of callback, reference to the ID of the latter timeout executed will no longer be lost. How time is also declared before the clearTimeout (which, in its code, makes use of the name time), there will be no more either ReferenceError.

Functional example:

let time; // <--- Note que a variável é externa ao callback.
document.querySelector('input').addEventListener('keyup', function(event) {
  clearTimeout(time);
  time = setTimeout(() => {
    console.log(event.target.value);
  }, 1500);
});

<input type="text" />