What is this timeout-related feature of javascript called?

Question

I'm familiar with this behavior, but don't have the vocabulary to describe (and thus google) it.

setTimeout(function () { alert("timeout!"); }, 1000);
veryLongProcess();  // lasts longer than 1000 milliseconds

I believe the result of this is that you get your alert after the long process is finished, i.e. longer than 1 second after the code was executed. I imagine this as timeouts sending functions to some separate "thread" or "stack" or "cycle" that can only start after the current one is finished, even if that current one takes longer than the timeout was originally specified for.

Is there a name for this? How can I learn more about how it works?

Single threaded? http://ejohn.org/blog/how-javascript-timers-work/ — j08691, Nov 07 '13 at 22:07
_'I imagine this as timeouts sending functions to some separate "thread" or "stack" or "cycle" that can only start after the current one is finished, even if that current one takes longer than the timeout was originally specified for.'_ - That's correct as an approximation or non-technical description of what's happening. JavaScript is single-threaded (if you ignore web workers), so `setTimeout` queues up a function to run later on the same thread and then if some other JS is running at that point the timeout gets delayed. — nnnnnn, Nov 07 '13 at 22:20
@Bryce Hanscomb's comments helped me find this: http://stackoverflow.com/questions/2035645/when-is-javascript-synchronous — Chris, Nov 07 '13 at 22:28

Bryce · Accepted Answer · 2013-11-07T22:17:22.670

I believe you may be looking for the term 'synchronous' programming.

Since JavaScript is single threaded, your veryLongProcess() will in fact cause the alert to trigger after 1000ms because of something called blocking.

Be aware that blocking JavaScript can degrade the user experience significantly, such as locking up the browser, or causing it to show a 'kill script' dialog, breaking the functionality of your process.

ejc · Answer 2 · 2013-11-07T22:19:46.623

0

What you're looking for is called "callback functions." You can pass functions as a variables to other functions, and then execute them whenever you want. I wrote a quick sample for how it works below (untested).

function longProcess(callback){
    //a bunch of code execution goes here
    var testNumber = 5;

    //This portion of code happens after all desired code is run
    if (callback != undefined){  //Check to see if a variable 'callback' was passed... we're assuming it's a function
        callback(testNumber);    //Execute the callback, passing it a value
    }
}

function testCallback(number){
    alert("Number: " + number);  //Alert box will popup with "Number: 5"
}

longProcess(testCallback);       //Call your long process, passing another function as a variable

edited Nov 07 '13 at 22:19

answered Nov 07 '13 at 22:13

ejc

333
2
8

OP isn't asking about callbacks. The question is about what causes the timeout to be delayed. – nnnnnn Nov 07 '13 at 22:24
I misunderstood the emphasis of the question, however callbacks are still relevent. The setTimeout function is passed a callback function which executes after 1 second. To me it sounds like the OP is asking about asynchronous-related execution, the most common of these in javascript is AJAX which is asynchronous and has very heavy use of callback functions. – ejc Nov 07 '13 at 22:41

What is this timeout-related feature of javascript called?

2 Answers2