在回調協助結束時觸發jQuery函數？

我顯然不能正確理解jQuery的異步執行。我有以下問題。我有如下改變選擇列表的功能：在回調協助結束時觸發jQuery函數？

function loadGroups() { 

$.getJSON("/Process/ShowGroups", null, function (data) { 
    var selectList = $("#groupsList"); 
    selectList.empty(); 
    $.each(data, function (index, optionData) { 
     var option = $('<option>').text(optionData.Text).val(optionData.Value); 
     selectList.append(option); 
    }); 
}); 
$("#groupsList").trigger("liszt:updated"); 
}

我使用需要被驚動後的名單已更新，以便它可以刷新內容的控制。我需要觸發

$("#groupsList").trigger("liszt:updated");

現在，這似乎是有道理的我，但我被告知，這是同樣的回調的一部分，我需要把它移動到回調函數的結束。公平的，然後我嘗試了這個：

loadGroups(); 
$("#groupsList").trigger("liszt:updated");

這似乎應該工作。 loadGroups（）進行更改。函數調用後不應該callback？我錯過了什麼？在觸發事件之前，如何確保loadGroups已完成？

來源

2011-11-22 Rondel

您應該在getJSON回調中觸發它。試試這個

function loadGroups() { 

$.getJSON("/Process/ShowGroups", null, function (data) { 
    var selectList = $("#groupsList"); 
    selectList.empty(); 
    $.each(data, function (index, optionData) { 
     var option = $('<option>').text(optionData.Text).val(optionData.Value); 
     selectList.append(option); 
    }); 
    $("#groupsList").trigger("liszt:updated"); 
}); 

}

來源

2011-11-22 15:29:49 ShankarSangoli

不錯。奇蹟般有效。 – Rondel

@Rondel - Kool，儘可能將其標記爲答案。 – ShankarSangoli

那麼ajax仍然是異步運行，所以這樣做不會解決問題。有幾種解決方案：

您可以將觸發器代碼移入回調本身。這可以工作，但是將您的ajax請求與觸發器代碼緊密耦合，每次調用loadGroups（）時都會調用觸發器。

function loadGroups() { 
    $.getJSON("/Process/ShowGroups", null, function (data) { 
     var selectList = $("#groupsList"); 
     selectList.empty(); 
     $.each(data, function (index, optionData) { 
      var option = $('<option>').text(optionData.Text).val(optionData.Value); 
      selectList.append(option); 
     }); 
     $("#groupsList").trigger("liszt:updated"); 
    }); 
}

您可以將回調作爲參數傳遞給函數。這可以更靈活一些，因爲您可以調用其他函數，而不僅僅是觸發器代碼。

function loadGroups(callback) { 
    $.getJSON("/Process/ShowGroups", null, function (data) { 
     var selectList = $("#groupsList"); 
     selectList.empty(); 
     $.each(data, function (index, optionData) { 
      var option = $('<option>').text(optionData.Text).val(optionData.Value); 
      selectList.append(option); 
     }); 
     if(typeof callback === 'function') 
      callback(); 
    }); 
}

然後

loadGroups(function(){ $("#groupsList").trigger("liszt:updated"); });

您可以使用新的jQuery遞延API執行任何你需要一次Ajax請求已完成。

function loadGroups() { 
    return $.getJSON("/Process/ShowGroups", null, function (data) { 
     var selectList = $("#groupsList"); 
     selectList.empty(); 
     $.each(data, function (index, optionData) { 
      var option = $('<option>').text(optionData.Text).val(optionData.Value); 
      selectList.append(option); 
     }); 

    }); 
}

然後使用功能

$.when(loadGroups()).then(function(){ $("#groupsList").trigger("liszt:updated"); });

來源

2011-11-22 15:36:30

感謝您的解釋。幫了很多 – Rondel

您的代碼將下面這個命令被執行：

$ .getJSON（「/程序/ ShowGroups」 ...
服務器調用url。客戶端不會等待服務器的響應。
$ .getJSON之後的任何代碼，進入loadGroups函數。
當服務器發送響應（可能在步驟3之後）時，將執行回調函數。因此，必須在響應之後執行的任何代碼都必須放入回調函數（$ .getJSON調用的第三個參數）中。

來源

2011-11-22 15:37:41

在回調協助結束時觸發jQuery函數？

回答

相關問題