使用AJAX進行動態頁面提取

Question

我有一個關於使用AJAX進行部分頁面加載的問題。

假設用戶單擊一個進行AJAX調用的按鈕以加載頁面的一部分（它可能包括動態加載的JS和/或CSS），並且html內容被放置在某個div上。 然后，在第一次加載完成之前，他單擊另一個按鈕，該按鈕會進行另一個AJAX調用，從而將其他內容放在同一div上。 我應如何防止這種行為造成任何沖突？ 可能存在一些沖突，例如，第一次加載對未找到的內容執行一些JS，因為第二次加載已經更改了該div。

提前致謝。

編輯：我將不勝感激基於異步方法的答案。 謝謝。

Answer 1

Genesis和Gaurav關於禁用用戶交互是正確的。 我對每個人+1。 實際上，如何處理邏輯非常簡單：

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});

Answer 2

• 使它同步（不推薦）
• 在禁用時禁用鏈接/按鈕
• 不要介意

但在您的情況下，不會發生任何沖突，因為替換html時，腳本也是如此

Answer 3

只需禁用導致AJAX調用在尚未完成時開始的按鈕即可。

Answer 4

我不確定這對您實際上是一個問題，因為Javascript是單線程的。 當第一個ajax響應進入並且您執行一些javascript時，只要它是一個連續的執行線程（在處理過程中沒有計時器或其他異步ajax調用），該javascript就不會被第二個ajax響應中斷。

讓我們來看一個場景：

1. 用戶單擊按鈕-第一個ajax調用開始。
2. 用戶單擊按鈕-第二個ajax調用開始。
3. 第一次ajax調用完成，並且完成代碼的執行開始於如何處理新數據。
4. 從第一個ajax調用執行代碼時，第二個ajax調用完成。 此時，瀏覽器將第二個ajax調用完成放入隊列。 它不能觸發您的任何完成代碼，因為Javascript引擎從第一次加載就仍在運行。
5. 現在，第一個加載完成其執行和代碼，並從其完成處理程序返回。
6. 現在，瀏覽器進入隊列並找到下一個要處理的事件。 它找到第二個ajax調用的完成，然后啟動該ajax調用的完成代碼。

從這種場景可以看到，該場景具有重疊的ajax調用，而第二個在處理的中間完成了第一個，但由於Javascript引擎是單線程的，因此仍然沒有沖突。

現在，正如其他答案所建議的那樣，您不想讓用戶在仍在處理新請求的情況下啟動新請求，但是從技術上講，它們不會相互沖突。 如果您想防止通話重疊，可以使用以下幾種工具：

• 您可以防止在第一個通話未完成時開始第二個通話。 您可以在用戶界面和實際代碼中進行此操作。
• 當有多個未決呼叫時，您可以決定放棄/忽略先前的響應，而不處理它們-僅等待最后的響應。
• 發起第二個呼叫時，您可以取消第一個呼叫。
• 在上述情況下，您可以讓第二個替換第一個。

前兩個選項要求您跟蹤某個跨Ajax調用的狀態，以便一個Ajax調用可以知道是否還有其他Ajax調用並采取相應的措施。