CODEWITHSUNDEEP
javascript
Surendran A
Surendran A

Reputation: 31

When I assign to a variable the result of setTimeout, how does the function inside setTimeout run even though I don't call my variable?

Please go through below code ,

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

When the button is clicked , it display my function ; but myVar variable is assigned to a function and myVar is not called again, how does it execute it ?

Complete code in below link

https://www.w3schools.com/js/tryit.asp?filename=tryjs_settimeout2

Upvotes: 1

Views: 1353

Answers (2)

Maniao
Maniao

Reputation: 11

Calling a function inside of a variable declaration will execute the function and assign its return value to the variable.

Assigning a function to a variable, without calling, stores the function object inside of it. The variable can then be called to execute the function.

In this case, the first is true:

const myVar = setTimeout(func, 1000)

Because setTimeout is called inside the declaration, it executes. Its return value, which consists in a timer id, gets assigned to the variable.

Upvotes: 1

ProfDFrancis
ProfDFrancis

Reputation: 9411

Clicking the button runs the setTimeout function, which starts a timer inside Javascript

When you run setTimeout, with the name of a function and a number of milliseconds, it starts an internal timer in Javascript.

You do not have to do anything to later trigger that function: Javascript will automatically do so, once the time is up (or as soon as possible afterwards, if Javascript is busy).

Here is your original version (shortened):

function myFunction() {
  alert("Hello");
}
<h2>JavaScript Timing</h2>
<p>After you click "Try it", you will get an alert after 3 seconds, UNLESS you click "Cancel" during that time.</p>
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Cancel</button>

Showing that you don't need the "myVar="

You only needed the myVar= because you wanted to be able to cancel the timer. When you call setTimeout, it (immediately) returns a handle to the timer. You can use that handle to cancel the timer.

If you don't need the ability to cancel, you don't need the myVar=. Just call setTimeout, like this:

function myFunction() {
  alert("Hello");
}
<h2>JavaScript Timing</h2>
<p>After you click "Try it", you will get an alert after 3 seconds.</p>
<button onclick="setTimeout(myFunction, 3000)">Try it</button>

Showing that you don't even need the separate Javascript function

setTimeout can be given a full definition of a function, rather than just a name.

<button onclick="setTimeout(function(){alert('Hello')}, 3000)">Try it</button>

How setTimeout works

Javascript maintains a list of things that it has been asked to do at intervals (with setInterval) or at particular times (with setTimeout).

It generally gets on with the program it is running, but eventually runs out of things to do. Then it starts going through those lists of pending tasks, to see if enough time has passed for them to be ready to execute.

This process, called the "event loop" is quite complicated. Fortunately we don't have to worry about it, other than bear in mind that it is not magic. If we have a program that requires a long run of processing, say 1 minute, then during that time Javascript will not be looking in the queues of intervals and timeouts. When it finishes the program task (or is waiting for network interaction etc), it will start looking at that.

Upvotes: 1

Related Questions