AJAX вызов не позволяет переходить на другие страницы до его завершения

Question

Вот последовательность операций для моей HTML5 страницы панели инструментов, на которой несколько асинхронно отображаются несколько диаграмм Google.

1. Асинхронные AJAX вызовы выполняются для каждой диаграммы для извлечения данных.
2. AJAX звонки вызывают PHP файлы.
3. PHP файлы извлекают данные из базы данных Oracle.
4. По мере извлечения данных для каждой диаграммы отображается соответствующая диаграмма.

Это довольно крутая панель инструментов: -)

Здесь возникает проблема: когда я нажимаю на другую гиперссылку на той же странице (например, ссылку на страницу настроек), Значок прогресса браузера вращается, и он не переходит на новую страницу, пока все диаграммы не загрузятся.

Я думал, что "асинхронные" вызовы позволяют вам покинуть страницу. Я хотел бы отойти от страницы диаграмм, даже если все диаграммы не завершили загрузку.

Я использую Microsoft IIS в качестве веб-сервера и PHP 7.4.

Вот мой код для вызова AJAX.

function drawChart(chartType, chartDivName, dataFileName, dataFileParam1, dataFileParam2) {
    var chartDiv = document.getElementById(chartDivName);

    // first, display the loading message
    chartDiv.innerHTML = "<img class='img-fluid' src='/images/loading.gif' alt='Loading...'>";

    // get the data asynchronously
    $.ajax({
        url         : dataFileName,
        method      : "POST",
        data        : {param1: dataFileParam1, param2: dataFileParam2},
        dataType    : "JSON",
        async       : true,
        success     : function(data) {
            displayChart (chartDiv, data);
        },
        error       : function(xhr, status, error) {
               chartDiv.innerHTML = "show the error";
        }
    });

} // end drawChart

Вот как я вызываю вышеуказанную функцию:

<!-- Load charts -->
<script>
    // set the reportDate variable and the report-date form field
    reportDate = getYesterdayDate();
    $('#report-date').val(reportDate);

    /*
    **
    ** Place all charts and dynamic data calls that need to be loaded on the pgae in this function.
    ** This function should include the call to loading the daily charts.
    **
    */
    function loadAllCharts() {
        //load daily charts and dynamic data
        loadDailyCharts();

        // load non-daily charts and dynamic data
        getHtmlData("mtd-order-total", '/om/data/mtd_om_total.php', '', '');
        getHtmlData("mtd-ar-total", '/ar/data/mtd_ar_total.php', '', '');
        drawChart('column', 'monthly-orders-chart', '/om/chart-data/monthly_om_totals.php', '', '');
        drawChart('column', 'monthly-ar-chart', '/ar/chart-data/monthly_ar_totals.php', '', '');
    }

    /*
    **
    ** Place all charts and dynamic data calls that need to be refreshed when the date field is changed
    ** in this function.
    **
    */
    function loadDailyCharts() {
        //load dynamic data
        getHtmlData("yday-order-total", '/om/data/daily_om_total.php', reportDate, '');
        getHtmlData("yday-ar-total", '/ar/data/daily_ar_total.php', reportDate, '');

        // load charts
        drawChart('single-column', 'day-orders-chart', '/om/chart-data/daily_om_by_source.php', reportDate, '')
        drawChart('single-column', 'day-ar-chart', '/ar/chart-data/daily_ar_by_type.php', reportDate, '');
    }


    // Load all charts on page load
    google.charts.setOnLoadCallback(loadAllCharts);


    // Reload charts when report-date is changed
    $('#refresh-report').click(function() {
        reportDate = $("#report-date").val();
        loadDailyCharts();
    });

</script>

Answer 1

Ваши. ajax звонки выполняются из функции $ (document) .ready jquery? AJAX вызовы, сделанные в этом контексте, могут блокировать событие window.load (), которое запускается после первоначального выполнения Javascript. Попробуйте использовать window.load () вместо document.ready ().

К вашему сведению - это только мое лучшее предположение. Я мог бы сделать лучшее предположение, если бы вы могли поделиться со мной своим html, а также Javascript вокруг вызова вашей функции.