异步Ajax加载局部视图时Chrome提示请求未完成的问题求助

我有HistoryController.cs、index.cshtml、若干JavaScript代码以及三个局部视图。index.cshtml中三个局部视图以标签页列表形式呈现，初始状态为隐藏。点击页面中的按钮时，会调用JavaScript函数发起三个Ajax请求，分别加载这三个局部视图。

当前现象：当其中一个局部视图加载完成后，若在开发者工具中对该视图执行操作，Chrome会提示“Caution: request is not finished yet in chrome”，操作必须等待其他局部视图加载完成后才会执行。

预期效果：无需等待其他局部视图加载完成即可进行交互操作——第一个局部视图加载完成后，就能在其他视图后台加载的同时与之交互。

Index.cshtml #

<input type="button" id="HistorySearchButton" value="Search" class="buttoncommon" />

<div id="historyPane">
    <div id="tabs">
        <ul role="tablist">

            <li id="ClientHistoryDivTab" role="tab" aria-controls="companyHistoryDetailsTab">
                <a id="companyHistoryDetailsTabLink" href="#companyHistoryDetailsTab" class="ui-tabs-anchor tabs-bg" role="presentation">Client History</a>
            </li>

            <li id="CompanySubscriptionDivTab"  role="tab" aria-controls="companySubHistoryDetailsTab">
                <a id="companySubHistoryDetailsTabLink" href="#companySubHistoryDetailsTab" class="ui-tabs-anchor tabs-bg" role="presentation"> Company Sub History</a>
            </li>

            <li id="UserSubscriptionDivTab"  role="tab" aria-controls="userSubHistoryDetailsTab">
                <a id="userSubHistoryDetailsTabLink" href="#userSubHistoryDetailsTab"  role="presentation">User History</a>
            </li>
        </ul>
    </div>
</div>

<div id="companyHistoryDetailsTab" class="partial-container" style="display:none"></div>
<div id="companySubHistoryDetailsTab" class="partial-container" style="display:none"></div>
<div id="userSubHistoryDetailsTab" class="partial-container" style="display:none"></div>

JavaScript代码 #

$("#HistorySearchButton").click(function () {
    LoadCompanyHistory();
    $("#companyHistoryDetailsTab").show();
    LoadCompanySubscriptionHistory();
    LoadUserSubscriptionHistory();
});


function LoadCompanyHistory() {
    $.ajax({
        url: '/History/GetCompanyDetailsHistory',
        type: 'GET',
        cache: false,
        traditional: true,
        async: true, 
        // some code
        success: function (data) {
            $("#companyHistoryDetailsTab").html(data);
        },
        // some code
    });
}

function LoadCompanySubscriptionHistory() {
    $.ajax({
        url: '/History/GetCompanySubcriptionHistory',
        type: 'GET',
        cache: false,
        traditional: true,
        async: true,
        // some code
        success: function (data) {
            $("#companySubHistoryDetailsTab").html(data);
        },
        // some code
    });
}

function LoadUserSubscriptionHistory() {
    $.ajax({
        url: '/History/GetUserSubcriptionHistory',
        type: 'GET',
        cache: false,
        traditional: true,
        async: true,
        // some code
        success: function (data) {
            $("#userSubHistoryDetailsTab").html(data);
        }, 
        // some code
    });
}

HistoryController代码 #

[HttpGet]
public ActionResult GetCompanyDetailsHistory()
{
    // some logic
    return PartialView("_ClientDetailsHistory", model);
}

[HttpGet]
public ActionResult GetCompanySubcriptionHistory()
{
    // some logic
    return PartialView("_CompanySubscriptionHistory", model);
}

[HttpGet]
public ActionResult GetUserSubcriptionHistory()
{
    // some logic
    return PartialView("_UserSubscriptionHistory", model);
}

内容的提问来源于stack exchange，提问作者rohan