tl; dr; , this would not be possible in a strictly single-threaded environment without external assistance.
I think I understand your problem. Let me get some things out of the way:
JavaScript is always in sync
There are no asynchronous APIs in the language specification. All functions like Array.prototype.map or String.fromCharCode always work synchronously *.
The code will always work until completion. The code does not stop until it completes with return , an implicit return (to the end of the code), or throw (all of a sudden).
a(); b(); c(); d(); // the order of these functions executed is always a, b, c, d and nothing else will // happen until all of them finish executing
JavaScript lives inside the platform
JavaScript defines a concept called host environment :
Thus, the existing system is reported to provide a host environment for objects and objects that complements the scripting language.
The host environment in which JavaScript is executed in the browser is called the DOM or document object model. It indicates how your browser window interacts with the JavaScript language. In NodeJS, for example, the host environment is completely different.
Although all JavaScript objects and functions are executed synchronously until completion, the host environment can expose its own functions, which are not necessarily defined in JavaScript. They do not have the same limitations as standard JavaScript code and can define different types of behavior - for example, the result of document.getElementsByClassName is a live DOM NodeList that has very different behavior for your regular JavaScript code:
var els = document.getElementsByClassName("foo"); var n = document.createElement("div"); n.className = "foo"; document.body.appendChild(n); els.length; // this increased in 1, it keeps track of the elements on the page // it behaves differently from a JavaScript array for example.
Some of these host functions must perform I / O, such as schedule timers, network requests, or file access. These APIs, like all other APIs, must be executed before completion. These APIs are located on the host platform - they call features that do not have your code, as a rule (but not necessarily), they are written in C ++ and use streaming and operating system tools for simultaneous and parallel operation. This concurrency can be just background work (e.g. scheduling a timer) or actual parallelism (e.g. WebWorkers - again part of the DOM, not JavaScript).
So, when you invoke actions in the DOM, such as setTimeout, or apply a class that invokes CSS animations, it is not tied to the same requirements as your code. It can use the async io streaming or operating system.
When you do something like:
setTimeout(function() { console.log("World"); }); console.log("Hello");
What is actually going on:
- The host function
setTimeout is called with the parameter of the type function. It queues the function in the host environment . console.log("Hello") runs synchronously.- All other synchronous code is executed (note that the setTimeout call was completely synchronous).
- Finished launching JavaScript - control is transferred to the host environment.
- The host environment notices that it has something in the timer queue and enough time has passed, so it calls its argument (function) -
console.log("World") . - All other code in the function runs synchronously.
- The control returns back to the host environment (platform).
- Something else is happening in the host environment (mouse click, return AJAX request, enable timer). The host environment calls the handler that the user passed to these actions.
- Again, all JavaScript runs synchronously.
- And so on and so forth.
Your particular case
$('#mybox').hide(17000); console.log('Previous command has not yet terminated!');
Here, the code runs synchronously. The previous command has completed, but in reality it is not so much - instead, it planned a callback on platform a (in .hide(17000) , and then executed console.log again) - all JavaScirpt code always runs synchronously.
That is, hide does very little work and works for a few milliseconds, and then plans more work to be done later. It does not work for 17 seconds.
The hide implementation now looks something like this:
function hide(element, howLong) { var o = 16 / howLong;
Thus, basically our code is single-threaded - it asks the platform to call it 60 times per second and makes the element a little less noticeable every time. Everything is always executed until completion, but except for the first code execution, the platform code (host environment) calls our code, except vice versa.
So, the real direct answer to your question is that the computation time is "taken" from your code, as in the case of an AJAX request. To answer it directly:
This is not possible in a single streaming environment without outside help.
This external shell is a system that uses either threads or asynchronous operating system tools — our host environment. This could not have been done without it in the standard ECMAScript standard.
* With the inclusion of ES2015 promises, the language delegates tasks back to the platform (host environment), but this is an exception.