AJAX调用会阻止导航到其他页面，直到完成为止

Question

这是我的html5仪表板页面的流程，该页面以异步方式显示多个Google图表。

为每个图表进行异步AJAX调用以检索数据。
[AJAX调用将调用php文件。
PHP文件从Oracle数据库检索数据。
当检索到每个图表的数据时，将渲染相应的图表。

这是一个非常酷的仪表板：-）

这里出现问题：当我单击同一页面上的另一个超链接（例如指向“设置”页面的链接）时，浏览器的进度图标旋转，并且直到所有图表都完成加载后，它才导航到新页面。

我认为进行“异步”调用可以使您离开页面。即使所有图表尚未完成加载，我也想离开图表页面。

我正在使用Microsoft IIS作为Web服务器和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

这就是我调用上述功能的方式：

    drawChart('column', 'monthly-ar-chart', '/ar/chart-data/monthly_ar_totals.php', '', '');