Javascript Threading With Ajax Callbacks

Question

Given the following code:

<textarea id="mytext"></textarea>

...

var storedVal = "";

function taChanged(evt) {
    storedVal = $("#mytext").val();
}

$(document).ready(function() {
    $("#mytext").onkeydown(taChanged);
    doUpdate();
});

function doUpdate() {
    $.ajax("example.com/updates", function() {
        var storedVal1 = storedVal ;

        // lengthy processing here
        // ........

        var storedVal2 = storedVal ;
        var domVal = $("#mytext").val();

        if(storedVal1 != storedVal2) alert("storedVal changed while processing");
        if(storedVal1 != domVal) alert("real val changed while processing");

        doUpdate();
    });
}

Will the first alert ever show?
Will the second alert ever show?
Why?

For answers to 1 and 2...try it and see?

Phrogz
– Phrogz

2010-12-05 04:24:52 +00:00
Commented Dec 5, 2010 at 4:24 — Phrogz
– Phrogz, Commented Dec 5, 2010 at 4:24

ide · Accepted Answer · 2010-12-05 04:47:02Z

3

Aside from WebWorkers, JavaScript runs in a single thread so even if the presses a key, clicks on an element, or performs any other interaction with the page, the data accessible from JS will not change. In fact, the UI will block until your JS finishes running; only after the interpreter has run all of your JavaScript code does it relinquish control to the browser, which can finally process all of the UI events that have queued up.

Therefore, assuming that your "lengthy processing" does not modify storedVal, the first alert can never show. There is no opportunity for the user or browser to get the JS interpreter to modify storedVal.

The second alert can never show as well, assuming that there is no other JS code that modifies storeVal or the textarea's value. This remains true in more complex scenarios, where the user types in the textbox after you issue your AJAX request but before the callback function is invoked:

The user types in the textarea, your onkeydown handler is invoked, you save the value of the textarea in storedVal, and then send an AJAX request. The JS interpreter gives back control to the browser.
The AJAX request is in flight, and the user types in the textarea, causing the browser to invoke the onkeydown handler a second time, thus overwriting storedVal with the new value of the textarea and issuing another AJAX request.
When the first AJAX response arrives and invokes the AJAX callback, it will compare the new value of storedVal with the new value of the textarea, which will be equal.

The key here is that if the only way to modify $('#mytext').val() is by typing a key, and if the only code that modifies storedVal is storedVal = $('#mytext').val(), then the two will always be equal inside of your AJAX callback.

P.S. A small typo ($('#mytext').val().length() instead of $('#mytext').val()) will cause the program to crash.

answered Dec 5, 2010 at 4:47

ide

20.9k6 gold badges72 silver badges113 bronze badges

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

2 Comments

Ben Noland Over a year ago

So if the user types in the textarea during length processing, $('#mytext').val() will not change until the entire callback method finishes?

ide Over a year ago

That's right—the lengthy processing will freeze up the entire UI, so the textarea will not receive the user's keypress (thus your keydown handler will not run, and nor will the pressed key even show up in the text area). After all of your JS completes, then the user might see a flurry of keys appear if they were trying to type and the browser had queued up everything.

Diogo · Accepted Answer · 2010-12-05 04:18:51Z

1

javascript is not multi threaded, so, if both coditions in both if's statements are true, both alert will show, in that order.

answered Dec 5, 2010 at 4:18

Diogo

5482 silver badges8 bronze badges

2 Comments

James Black Over a year ago

Using workers you can get threading, but in his example, I believe you are correct.

Ivo Wetzel Over a year ago

Even with workers, you don't run into multi threading issues, all you can do between workers/main is message passing.

Collectives™ on Stack Overflow

Javascript Threading With Ajax Callbacks

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related