jQuery .ajax阻止.getJSON吗？

Question

this is my first question, please be gentle :) I've been trying to resolve this for a couple of hours now and I'm getting nowhere fast.

Background

I have a web application where a process is kicked off with .ajax(). This can take a little while to complete, so I have set up a jQuery.progressbar() system to give UI feedback that is started (using setInterval) at the same time as the .ajax(), and every 250ms it calls a .getJSON() to read the progress of the background event. Everything server-side seems to function flawlessly.

The Problem

It seems that (from copious use of console.log() that the .ajax() event blocks the .getJSON() from running, until the .ajax() has completed. In my console log I have every 250ms an indication that updateProgressBar() is running, but I never get into the .done portion of it until the original .ajax() call finishes.

What am I missing here?

// file copy dialog
$(function () {
    $("#file_copy_dialog").dialog({
        autoOpen: false,
        resizable: false,
        height: 250,
        width: 400,
        modal: true,
        buttons: {
            "Copy Files": function () {
                // do ajax copy request
                console.log("Starting setInterval updateProgressBar()");
                window.interval = setInterval('updateProgressBar()', 250);
                console.log("---------------------------------- Firing file_copy AJAX request ---------------------------------");
                $.ajax({
                    type: "POST",
                    url: "/ajax/file_copy.php",
                    data: {
                        job_id: "<?php echo $item_data['job_id']; ?>",
                        item_id: "<?php echo $item_id; ?>",
                        quote_id: "<?php echo $item_data['quote_id']; ?>"
                    }
                })
                    .done(function () {
                    console.log("----------------------------- file_copy AJAX done --------------------------------------");
                });
            },

                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

// paste button click event handler
$(function () {
    $("#paste_files").click(function () {

        // open dialog box
        $("#progressbar").progressbar({
            value: 0
        });
        $(".progress-label").text("Ready");
        $("#file_copy_dialog").dialog("open");

    });
});

// progress bar initiator
$(function () {
    var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");

    progressbar.progressbar({
        value: false,
        change: function () {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function () {
            progressLabel.text("Complete!");
        }
    });
});


// file copy progress checker
function updateProgressBar() {
    console.log("Running updateProgressBar()");
    $.getJSON("/ajax/file_copy_progress.php")
        .done(function (json) {
        console.log("In UpdateProgressBar().done");
        // successful check
        if (json.status == 'ERROR') {
            console.log("updateProgressBar() json.status = ERROR");
            $('#progresstext').text(json.message);
            clearInterval(window.interval);
        } else {
            console.log("updateProgressBar() json.status = " + json.status + " json.value = " + json.value);
            $('#progressbar').progressbar({
                value: json.value
            });
            $('#progresstext').text(json.message);
        }

        if (json.value == 100) {
            console.log("ClearInterval()");
            clearInterval(window.interval);
        }
    })

        .fail(function (jqxhr, textStatus, error) {
        // check failed
        $('#progresstext').text("Progress check request failed");
    });
}

Forgive my formatting ... and thank you for any help you may be able to provide.

EDIT

Thanks to Adeneo, turns out there's nothing wrong with the above code at all. The issue lies with PHP locking the session file. Calling session_write_close() and session_start() in strategic places in your initial backend ajax() called' script, will allow the second script to get a look-in occasionally and read the status.

Answer 1

The issue lies with PHP, not jQuery in this instance.

As pointed out by @adeneo, only one process can read/write the session file at once. (Quite logical when you think about it!). Calling

session_write_close() 

and then

session_start() 

in strategically good places in your initial script, will permit the first script to get a go at reading the session variables occasionally, and make the whole thing work as intended.