Is .html(stuff) synchronous or asynchronous?

Question

Suppose that stuff contains a considerable amount of html including an element that I want to fill in the line following this one:

$("#content").html(stuff);

Can the following line go ahead and fill the element defined in stuff or is it possible that the code is still running?

If the code will have finished running is it still possible that the element won't exist because the browser won't have rendered it yet?

I know that when I'm using .load (for the initial download of the element) that I'll have to use a callback, but the callback which comes with .html() isn't a do-this-when-done thing like they usually are, which is what has left me really confused. Given the similarity between .html and .load and knowing that .load is asynchronous my gut is telling me that .html must be too, but I can't find any indication either way. Please help.

The elements will be present in the DOM when html() returns. Be careful, however, of external-resource-bound elements like images which will be present but may not be loaded yet (so dimension-based computations will be wrong). — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 30, 2014 at 10:45
Even though it's synchronous, if another function runs at the same time (something triggered by some event or similar, i.e. not a line below it), you can still get a race condition where it will precede .html() — yuvi
– yuvi, Commented Jul 30, 2014 at 10:46
@yuvi, you cannot have "another function runs at the same time" in current JS (webworkers excepted, as usual). The handler would have to interrupt the current function, and by definition this means no race conditions. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 30, 2014 at 10:47
@FrédéricHamidi well, not always - stackoverflow.com/a/2734311/2387772 — yuvi
– yuvi, Commented Jul 30, 2014 at 10:48

jazZRo · Accepted Answer · 2014-07-30 12:03:35Z

5

The answer is already given in the comments, but to explain it a bit:

The html method doesn't call a callback, it's just a function that returns the jQuery object when a parameter is given (or the html content otherwise).

Say for example when stuff is a very large string containing a lot of html and it would slow down your script, the rest of the script will wait until the html is in place.

So what you asked is certainly possible:

var stuff = '<div id="new">This is a placeholder text</div>';
$('#content').html(stuff);
$('#new').text('This is the real text');

But if stuff is loaded through ajax with .load(), the third line must be in the callback to replace the placeholder text as soon as the html is received from the server:

$('#content').load('content.php', function() {
    $('#new').text('This is the real text');
});

which is btw not more than a shortcut for this:

$.ajax({
    url: 'content.php',
    success: function(data) {
        $('#content').html(data);
        $('#new').text('This is the real text');
    }
});

edited Jul 30, 2014 at 12:03

answered Jul 30, 2014 at 11:24

jazZRo

1,6081 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SteveC Over a year ago

Thanks. As my element filling code doesn't know going in whether the string is available to use .html I've passed it a function that is either passed to the .load callback or is run after the .html. It's that function which will fill the element contained in stuff.

jazZRo Over a year ago

Yes that would be the way to do it, that's exactly what I explained. So your question has been answered?

Collectives™ on Stack Overflow

Is .html(stuff) synchronous or asynchronous?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related