javascript callback用法 - 在繼續之前等待多個異步調用完成




2 Answers

您可以像這樣使用.ajaxStop()

$(function() {
  $(document).ajaxStop(function() {
    $(this).unbind("ajaxStop"); //prevent running again when other calls finish
    LoadContact();
  });
  LoadCategories($('#Category'));
  LoadPositions($('#Position'));
  LoadDepartments($('#Department'));
});

這將在所有當前請求完成後運行,然後取消綁定,以便在頁面執行中未來的ajax調用時它不會運行。 另外,確保將它放在你的ajax調用之前,所以它得到了足夠早的約束,對於.ajaxStart()來說更重要,但是最好的做法是同時使用它們。

callback教學 delay

所以,我有一個加載的頁面,並通過jquery.get發出幾個請求,用它們的值填充下拉列表。

$(function() {
    LoadCategories($('#Category'));
    LoadPositions($('#Position'));
    LoadDepartments($('#Department'));

    LoadContact();
};

然後調用LoadContact(); 這是另一個調用,當它返回時,它會填充表單上的所有字段。 問題是通常,下拉列表並非全部填充,因此,它無法將它們設置為正確的值。

我需要做的是,只要其他方法完成並且回調完成執行,LoadContact就會以某種方式執行。

但是,我不想在下拉填充回調的最後放置一堆標誌,然後檢查,並且在調用LoadContact()之前必須進行遞歸的setTimeout調用檢查;

jQuery中有什麼東西可以讓我說,“當所有這些都完成時執行它。”?

更多信息我正在思考這些問題

$().executeAfter(
    function () {   // When these are done
        LoadCategories($('#Category'));
        LoadPositions($('#Position'));
        LoadDepartments($('#Department'));
    },
    LoadContact // Do this
);

...它需要跟踪在執行方法期間發生的ajax調用,並且當它們全部完成時,調用LoadContact;

如果我知道如何攔截在該函數中創建的ajax,我可能會編寫一個jQuery擴展來執行此操作。

我的解決方案

;(function($) {
    $.fn.executeAfter = function(methods, callback) {

        var stack = [];

        var trackAjaxSend = function(event, XMLHttpRequest, ajaxOptions) {
            var url = ajaxOptions.url;

            stack.push(url);
        }

        var trackAjaxComplete = function(event, XMLHttpRequest, ajaxOptions) {
            var url = ajaxOptions.url;

            var index = jQuery.inArray(url, stack);

            if (index >= 0) {
                stack.splice(index, 1);
            }

            if (stack.length == 0) {
                callback();
                $this.unbind("ajaxComplete");
            }
        }

        var $this = $(this);

        $this.ajaxSend(trackAjaxSend)
        $this.ajaxComplete(trackAjaxComplete)

        methods();
        $this.unbind("ajaxSend");
    };
})(jQuery);

這會在調用方法時綁定到ajaxSend事件,並保留一個調用的url列表( 需要更好的唯一id )。 然後它從ajaxSend解除綁定,因此只跟踪我們關心的請求。 它還綁定到ajaxComplete並在返回時從堆棧中刪除項目。 當堆棧達到零時,它將執行我們的回調,並取消綁定ajaxComplete事件。







Related

javascript jquery asynchronous callback