Animations under single threaded JavaScript

Question

JavaScript is a single threaded language and therefore it executes one command at a time. Asynchronous programming is being implemented via Web APIs (DOM for event handling, XMLHttpRequest for AJAX calls, WindowTimers for setTimeout) and the Event queue which are managed by the browser. So far, so good! Consider now, the following very simple code:

$('#mybox').hide(17000);
console.log('Previous command has not yet terminated!');
... 

Could someone please explain to me the underlying mechanism of the above? Since .hide() has not yet finished (the animation lasts 17 seconds) and JS engine is dealing with it and it is capable of executing one command at a time, in which way does it go to the next line and continues to run the remaining code?

If your answer is that animation creates promises, the question remains the same: How JavaScript is dealing with more than one thing at the same time (executing the animation itself, watching the animation queue in case of promises and proceeding with the code that follows...).

Moreover, I cannot explain how promises in jQuery work if they have to watch their parent Deferred object till it is resolved or rejected that means code execution and at the same time the remaining code is executed. How is that possible in a single threaded approach? I have no problem to understand AJAX calls for I know they are taken away from JS engine...

Answer 1

tl;dr; it would not be possible in a strictly single threaded environment without outside help.

---

I think I understand your issue. Let's get a few things out of the way:

JavaScript is always synchronous

No asynchronous APIs are defined in the language specification. All the functions like Array.prototype.map or String.fromCharCode always run synchronously*.

Code will always run to completion. Code does not stop running until it is terminated by a return, an implicit return (reaching the end of the code) or a throw (abruptly).

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 a platform

The JavaScript language defines a concept called a host environment:

In this way, the existing system is said to provide a host environment of objects and facilities, which completes the capabilities of the scripting language.

The host environment in which JavaScript is run in the browser is called the DOM or document object model. It specifies how your browser window interacts with the JavaScript language. In NodeJS for example the host environment is entirely different.

While all JavaScript objects and functions run synchronously to completion - the host environment may expose functions of its own which are not necessarily defined in JavaScript. They do not have the same restrictions standard JavaScript code has and may define different behaviors - for example the result of document.getElementsByClassName is a live DOM NodeList which has very different behavior from your ordinary 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 have to perform I/O operations like schedule timers, perform network requests or perform file access. These APIs like all the other APIs have to run to completion. These APIs are by the host platform - they invoke capabilities your code doesn't have - typically (but not necessarily) they're written in C++ and use threading and operating system facilities for running things concurrently and in parallel. This concurrency can be just background work (like scheduling a timer) or actual parallelism (like WebWorkers - again part of the DOM and not JavaScript).

So, when you invoke actions on the DOM like setTimeout, or applying a class that causes CSS animation it is not bound to the same requirements your code has. It can use threading or operating system async io.

When you do something like:

setTimeout(function() {
   console.log("World");
});
console.log("Hello");

What actually happens is:

• The host function setTimeout is called with a parameter of type function. It pushes the function into a queue in the host environment.
• the console.log("Hello") is executed synchronously.
• All other synchronous code is run (note, the setTimeout call was completely synchronous here).
• JavaScript finished running - control is transferred to the host environment.
• The host environment notices it has something in the timers queue and enough time has passed so it calls its argument (the function) - console.log("World") is executed.
• All other code in the function is run synchronously.
• Control is yielded back to the host environment (platform).
• Something else happens in the host environment (mouse click, AJAX request returning, timer firing). The host environment calls the handler the user passed to these actions.
• Again all JavaScript is run synchronously.
• And so on and so on...

Your specific case

$('#mybox').hide(17000);
console.log('Previous command has not yet terminated!');

Here the code is run synchronously. The previous command has terminated, but it did not actually do much - instead it scheduled a callback on the platform a(in the .hide(17000) and then executed the console.log since again - all JavaScirpt code runs synchronously always.

That is - hide performs very little work and runs for a few milliseconds and then schedules more work to be done later. It does not run for 17 seconds.

Now the implementation of hide looks something like:

function hide(element, howLong) {
    var o = 16 / howLong; // calculate how much opacity to reduce each time
    //  ask the host environment to call us every 16ms
    var t = setInterval(function
        // make the element a little more transparent
        element.style.opacity = (parseInt(element.style.opacity) || 1) - o;
        if(parseInt(element.style.opacity) < o) { // last step
           clearInterval(t); // ask the platform to stop calling us
           o.style.display = "none"; // mark the element as hidden
        }
    ,16);
}

So basically our code is single threaded - it asks the platform to call it 60 times a second and makes the element a little less visible each time. Everything is always run to completion but except for the first code execution the platform code (the host environment) is calling our code except for vice versa.

So the actual straightforward answer to your question is that the timing of the computation is "taken away" from your code much like in when you make an AJAX request. To answer it directly:

It would not be possible in a single threaded environment without help from outside.

That outside is the enclosing system that uses either threads or operating system asynchronous facilities - our host environment. It could not be done without it in pure standard ECMAScript.

^{* With the ES2015 inclusion of promises, the language delegates tasks back to the platform (host environment) - but that's an exception.}

Answer 2

You have several kind of functions in javascript: Blocking and non blocking.

Non blocking function will return immediately and the event loop continues execution while it work in background waiting to call the callback function (like Ajax promises).

Animation relies on setInterval and/or setTimeout and these two methods return immediately allowing code to resume. The callback is pushed back into the event loop stack, executed, and the main loop continues.

Hope this'll help.

You can have more information here or here

Answer 3

Event Loop

JavaScript uses what is called an event loop. The event loop is like a while(true) loop.

To simplify it, assume that JavaScript has one gigantic array where it stores all the events. The event loop loops through this event loop, starting from the oldest event to the newest event. That is, JavaScript does something like this:

while (true) {
     var event = eventsArray.unshift();

     if (event) {
       event.process();
     }
}

If, during the processing of the event (event.process), a new event is fired (let's call this eventA), the new event is saved in the eventsArray and execution of the current continues. When the current event is done processing, the next event is processed and so on, until we reach eventA.

Coming to your sample code,

$('#mybox').hide(17000);
console.log('Previous command has not yet terminated!');

When the first line is executed, an event listener is created and a timer is started. Say jQuery uses 100ms frames. A timer of 100ms is created, with a callback function. The timer starts running in the background (the implementation of this is internal to the browser), while the control is given back to your script. So, while the timer is running in the background, your script continues to line two. After 100ms, the timer finishes, and fires an event. This event is saved in the eventsArray above, it does not get executed immediately. Once your code is done executing, JavaScript checks the eventsArray and sees that there is one new event, and then executes it.

The event is then run, and your div or whatever element it is moves a few pixels, and a new 100ms timer starts.

Please note that this is a simplification, not the actual working of the whole thing. There are a few complications to the whole thing, like the stack and all. Please see the MDN article here for more info.

Answer 4

Could someone please explain to me the underlying mechanism of the above? Since .hide() has not yet finished (the animation lasts 17 seconds) and JS engine is dealing with it and it is capable of executing one command at a time, in which way does it go to the next line and continues to run the remaining code?

jQuery.fn.hide() internally calls jQuery.fn.animate which calls jQuery.Animation which returns a jQuery deferred.promise() object; see also jQuery.Deferred()

The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.

For description of Promise see Promises/A+ , promises-unwrapping , Basic Javascript promise implementation attempt ; also , What is Node.js?

---

jQuery.fn.hide:

function (speed, easing, callback) {
    return speed == null || typeof speed === "boolean" 
    ? cssFn.apply(this, arguments) 
    : this.animate(genFx(name, true), speed, easing, callback);
}

jQuery.fn.animate:

function animate(prop, speed, easing, callback) {
    var empty = jQuery.isEmptyObject(prop),
        optall = jQuery.speed(speed, easing, callback),
        doAnimation = function () {
        // Operate on a copy of prop so per-property easing won't be lost
        var anim = Animation(this, jQuery.extend({},
        prop), optall);

        // Empty animations, or finishing resolves immediately
        if (empty || jQuery._data(this, "finish")) {
            anim.stop(true);
        }
    };
    doAnimation.finish = doAnimation;

    return empty || optall.queue === false ? this.each(doAnimation) : this.queue(optall.queue, doAnimation);
}

jQuery.Animation:

function Animation(elem, properties, options) {
    var result, stopped, index = 0,
        length = animationPrefilters.length,
        deferred = jQuery.Deferred().always(function () {
        // don't match elem in the :animated selector
        delete tick.elem;
    }),
        tick = function () {
        if (stopped) {
            return false;
        }
        var currentTime = fxNow || createFxNow(),
            remaining = Math.max(0, animation.startTime + animation.duration - currentTime),
        // archaic crash bug won't allow us to use 1 - ( 0.5 || 0 ) (#12497)
        temp = remaining / animation.duration || 0,
            percent = 1 - temp,
            index = 0,
            length = animation.tweens.length;

        for (; index < length; index++) {
            animation.tweens[index].run(percent);
        }

        deferred.notifyWith(elem, [animation, percent, remaining]);

        if (percent < 1 && length) {
            return remaining;
        } else {
            deferred.resolveWith(elem, [animation]);
            return false;
        }
    },
        animation = deferred.promise({
        elem: elem,
        props: jQuery.extend({},
        properties),
        opts: jQuery.extend(true, {
            specialEasing: {}
        },
        options),
        originalProperties: properties,
        originalOptions: options,
        startTime: fxNow || createFxNow(),
        duration: options.duration,
        tweens: [],
        createTween: function (prop, end) {
            var tween = jQuery.Tween(elem, animation.opts, prop, end, animation.opts.specialEasing[prop] || animation.opts.easing);
            animation.tweens.push(tween);
            return tween;
        },
        stop: function (gotoEnd) {
            var index = 0,
            // if we are going to the end, we want to run all the tweens
            // otherwise we skip this part
            length = gotoEnd ? animation.tweens.length : 0;
            if (stopped) {
                return this;
            }
            stopped = true;
            for (; index < length; index++) {
                animation.tweens[index].run(1);
            }

            // resolve when we played the last frame
            // otherwise, reject
            if (gotoEnd) {
                deferred.resolveWith(elem, [animation, gotoEnd]);
            } else {
                deferred.rejectWith(elem, [animation, gotoEnd]);
            }
            return this;
        }
    }),
        props = animation.props;

    propFilter(props, animation.opts.specialEasing);

    for (; index < length; index++) {
        result = animationPrefilters[index].call(animation, elem, props, animation.opts);
        if (result) {
            return result;
        }
    }

    jQuery.map(props, createTween, animation);

    if (jQuery.isFunction(animation.opts.start)) {
        animation.opts.start.call(elem, animation);
    }

    jQuery.fx.timer(
    jQuery.extend(tick, {
        elem: elem,
        anim: animation,
        queue: animation.opts.queue
    }));

    // attach callbacks from options
    return animation.progress(animation.opts.progress).done(animation.opts.done, animation.opts.complete).fail(animation.opts.fail).always(animation.opts.always);
}

---

When .hide() is called , a jQuery.Deferred() is created that processes the animation tasks.

This is the reason console.log() is called.

If include start option of .hide() can review that .hide() begins before console.log() is called on next line, though does not block the user interface from performing asynchronous tasks.

$("#mybox").hide({
  duration:17000,
  start:function() {
    console.log("start function of .hide()");
  }
});
console.log("Previous command has not yet terminated!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="mybox">mybox</div>

Native Promise implementation

function init() {

  function $(id) {
    return document.getElementById(id.slice(1))
  }

  function hide(duration, start) {
    element = this;
    var height = parseInt(window.getComputedStyle(element)
                 .getPropertyValue("height"));
    
    console.log("hide() start, height", height);

    var promise = new Promise(function(resolve, reject) {
      var fx = height / duration;
      var start = null;
      function step(timestamp) {        
        if (!start) start = timestamp;
        var progress = timestamp - start;
        height = height - fx * 20.5;        
        element.style.height = height + "px";
        console.log(height, progress);
        if (progress < duration || height > 0) {
          window.requestAnimationFrame(step);
        } else {
          resolve(element);
        }
      }
      window.requestAnimationFrame(step);
    });
    return promise.then(function(el) {
      console.log("hide() end, height", height);
      el.innerHTML = "animation complete";
      return el
    })
  }
  
  hide.call($("#mybox"), 17000);
  console.log("Previous command has not yet terminated!");
  
}

window.addEventListener("load", init)

#mybox {
  position: relative;
  height:200px;
  background: blue;
}

<div id="mybox"></div>