Geek asks and answers

Synchronous jquery $ .ajax without blocking IE?

A little time has passed, trying to achieve this, and I have a solution that, it seems to me, works very well in firefox, but when testing in IE it was found that using async: false leads to a browser lock (stops responding and delays freezing) during a call.

The requirement is basically the following. I will put a number of checkboxes that users can check. At a certain time, I call my function "selectedSeriesData ()", which is used to send requests to my service one by one, to receive the requested data. I specifically decided to use synchronization so that I could output status messages and warnings to the browser during the execution of the method.

eg. “Download data 1/3”, then “Download data 2/3”, “Download data 3/3”

Of course, now I know that this blocks certain browsers, so the experience in IE not only blocks the browser, but also any messages that I tried to display were never shown. Are there any simple doEvents, such as an action that I can trigger after every ajax call, or is it just a matter of restructuring my ajax calls. If this is the case, did any implementation recommendations provide my requirement?

The following is a simplified code snippet for reference.

function selectedSeriesData() {

    var seriesData = [];
    var index = 0;

    $.each($("input[name='idCheckBox']:checked"), function () {

        var id = $(this).val();

        $("#loadingMessage").text("Loading " + id + "...");

            $.ajax({
                type: 'POST',
                async: false,
                url: '<%: loadSeriesDataPath %>',
                dataType: 'json',
                data: {
                    Id: id
                },
                success: function (data) {
                    seriesData[index] = data;
                    index++;
                },
                error: function (xhr, ajaxOptions, error) {
                    $("#warnings ul").append('<li>A communication error occured while attempting to load data for the series.</li>');

                }
            });
        }
    });
    return seriesData;
}
+3
source share
2 answers

, : . $. , (, - ), .

, . , , , , jqueryer (, , !)

-, , ajax, . , .

function selectedSeriesData() {

    var requests = [];

    $.each($("input[name='somethingCheckBox']:checked"), function () {

        var id = $(this).attr('value');

        var request = {
            id: id
        };

        requests.push(request);

    });

    loadRequests(requests);
}

loadRequests, .

function loadRequests(requests)
{
    $("#loader").show();
    var seriesData = [];
    loadRequestAt(requests, 0, seriesData);
}

loadRequestAt, , , Data, . Anon. , Data, , , , , , .

function loadRequestAt(requests, loadAtIndex, seriesData) {
    var currentRequest = requests[loadAtIndex];

    $("#loadingMessage").text("Loading " + currentRequest.id + "...");

    $.ajax({
        type: 'POST',
        url: '<%: loadSeriesDataPath %>',
        dataType: 'json',
        data: {
            Id: currentRequest.id
        },
        success: function(data) {
            seriesData.push(data);
        },
        error: function(xhr, ajaxOptions, error) {
            $("#warnings ul").append('<li>A communication error occured while attempting to load ' + currentRequest.id'.</li>');
        },
        complete: function() {
            var nextIndex = loadAtIndex + 1;
            if (nextIndex < requests.length) {
                loadRequestAt(requests, nextIndex, seriesData);
            } else {
                $("#loader").hide();
                renderResults(seriesData);
            }
        }
    });
}

. AJAX ( JavaScript XML). , ( , , ). , , jquery ajax-. !

+1

jQuery , "" , .

function selectedSeriesData(cb) {
    var reqs = [];
    $("#loadingMessage").text("Loading...");
    $("input[name='idCheckBox']:checked").each(function () {
        var id = $(this).val();

        var req = $.ajax({
            type: 'POST',
            url: '<%: loadSeriesDataPath %>',
            dataType: 'json',
            data: {
                Id: id
            },
            error: function(xhr, ajaxOptions, error) {
                $("#warnings ul").append('<li>A communication error occured while attempting to load data for the series.</li>');

            }
        });
        reqs.push(req);
    });
    $.when(reqs).done(function() {
        cb($.makeArray(arguments));
    });
}

, , AJAX, .

. $.when , , . , $.when.apply($, reqs) $.when(reqs)

+1

More articles:


All Articles