How does setInterval() run independently of sequential execution?

86
February 13, 2020, at 03:00 AM

I'm a beginner in software development. To my knowledge, JavaScript runs sequentially from left to right, top to bottom, only skipping lines and returning carriages when functions are called. If that's the case, how can a program remember to run a setInterval function set to execute every 2000ms when it's currently occupied with other calculations?

Answer 1

Behind the scenes, there is a queue of “tasks” that JavaScript should run (the event loop). Tasks are functions. At the end of a function, JavaScript checks the queue to see if another function should be called.

setInterval only pushes functions into this queue, to be run at specified time.

JavaScript only has 1 thread, so if a heavy computation takes up a lot of time, events in the queue will be postponed until that task has completed.

This is why you do not want to run a blocking function in JS.

Answer 2

Although each JavaScript agent has a single executing thread - the so-called "event loop" - the runtime is not limited in the number of threads of execution it may use to service this.

Callbacks passed to functions such as setInterval, setTimeout, or requestAnimationFrame, are scheduled to be run by "magic" (ie. hidden logic) within the JavaScript runtime environment.

This hidden logic schedules the insertion of callbacks on job queues, at appropriate times (eg. after an interval has elapsed). When a job associated with a callback reaches the front of the relevant job queue, and when the executing thread is available to service it, the job is removed from the queue, a stack frame (aka execution context) is instantiated for it, pushed onto the call stack, and execution begins.

The logic for asynchronous functions such as setTimeout, setInterval and requestAnimationFrame are defined in other specifications (eg. W3C/WHATWG), and implemented by host applications (eg. a web browser or a NodeJS instance). These functions are not defined by the ECMAScript specification.

Asynchronous promise behavior, on the other hand, is specified within the ECMAScript specification.

READ ALSO
Passing Information From Twilio Widgets to Twilio Functions

Passing Information From Twilio Widgets to Twilio Functions

I have a flow setup in Twilio studioThe flow asks for an extension

168
What is a revocable proxy in JavaScript for?

What is a revocable proxy in JavaScript for?

Why would you want to revoke a proxy? Could you provide a practical application of Proxyrevocable()?

89
Querying the Stripe API for all charges per customer?

Querying the Stripe API for all charges per customer?

Is it possible to query the Stripe API for all charges for a specific customer or do we need to retrieve all charges, and then filter them for the customer?

65
Pop up Menu getting cut off at the bottom of the page

Pop up Menu getting cut off at the bottom of the page

I have a playlist and once the playlist items hit near the bottom of the screenthe pop up menu gets cut off as i'm using the x and y mouse coordinates to display the menu i guess from the upper left hand corner

47