CODEWITHSUNDEEP
javascriptjqueryhtmlsettimeoutexecution
user2700923
user2700923

Reputation:

Does "setTimeout(functon(){//do stuff},0)" cause a minuscule execution delay for it's contained function?

I set up an simple experiment out of curiosity:

As shown in the JSFiddle, using a timeout of zero results in the failure of the click's intended result event to be triggered.

This script results in an alert on click.

$(document).ready(function(){

    //setTimeout(function(){
        $(".wrapper").html('<div class="box"></div>');
    //},0)

    $(".box").click(function(){
        console.log("A box was clicked!");
    });

});

This script does not.

$(document).ready(function(){

    setTimeout(function(){
        $(".wrapper").html('<div class="box"></div>');
    },0)

    $(".box").click(function(){
        console.log("A box was clicked!");
    });

});

Why does a timeout of zero cause the element to be (I assume) generated after the click event listener is attached via JQuery?

Does setTimeout(functon(){//do stuff},0) cause a minuscule execution delay for it's contained function? If so, why does this happen?

Upvotes: 2

Views: 239

Answers (5)

Jos&#233; Cabo
Jos&#233; Cabo

Reputation: 6819

I think that you do not anderstand the behaviour of setTimeout(function (){}, 0);

Let's analyse the code step by step. Code 1:

  1. Creates a .box element and append in the DOM.
  2. Search for .box elements in the DOM.
  3. Handles the click event to that elements.

If you clic on the .box element then you will get execute the click callback.

The second code:

  1. You prepare a function to be executed in the future. This future will be in, at least, 0 ms, but still in the future. It is an asynchronous execution
  2. Search for .box elements in the DOM, but there aren't elements.
  3. Handles the click event to that elements, but there aren't elements.
  4. After the execution flux, the setTimeout function callback is executed. Then you create your .box element.

Unfortunately, you didn't applied the callback to any element because it was not created during the click handling.

Upvotes: 2

Zaenille
Zaenille

Reputation: 1384

What setTimeout(someFunction, timeInMS) means is that JavaScript will call someFunction AT LEAST timeInMS milliseconds in the future.

Upvotes: 0

Leftium
Leftium

Reputation: 17903

JavaScript is singled-threaded and event-based. setTimeout() immediately creates a new event that needs to be processed, but the current "event" (function/code) must be finished, first.

Excerpt from Events and timing in-depth:

When setTimeout gets 0 as the last argument, it attempts to execute the func as soon as possible.

The execution of func goes to the Event queue on the nearest timer tick. Note, that’s not immediately. No actions are performed until the next tick.

Other detailed explanations:

Note: I often use this setTimeout(func, 0) "trick" to execute code that must be run after a DOM manipulation or the current function is completed.

Upvotes: 4

jurassix
jurassix

Reputation: 1509

Play around with JSPerf. It seems setTimeout is considerably slower.

Upvotes: 1

luisZavaleta
luisZavaleta

Reputation: 1168

It causes the function to be executed asynchronously.

It executes instantly but asynchronously, that means that it doesn't follow the normal flow, so It could be executed after or before the next function, you don't have control over that anymore.

Upvotes: 0

Related Questions