Question

getOptionsData执行ajax调用以获取选项列表并更新到fancybox的select div。一旦getOptionsData的ajax调用结束，那么必须通过调用openFancyBox来显示fancybox。

我认为放置openFancyBox方法的最佳位置应该是getoptionsData中的“success”函数。但是，该功能已经在许多不需要这种花式盒的地方使用。

如何从showFancyBox（）方法内部模拟此行为。因为，下面的当前实现不会在调用fancyBox之前等待getoptionsData ajax完成..

我尝试使用“then”：getoptionsData（）。then（test.openFancyBox（）），但它没有解决。

        var test = {

        'getOptionsData': function () {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
            }

            $.ajax({
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });

        },


        'showFancyBox': function () {

          test.getOptionsData(); //Does not wait for Ajax call to be completed
          openFancyBox();

        },

    }

Answer 1

您可以使用callbacks。

这是一个例子;

var test {

        'getOptionsData': function (callback) {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
                callback();
            }

            $.ajax({
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });

        },


        'showFancyBox': function () {

          test.getOptionsData(function() {
            openFancyBox();
          }); 
        },

    }

getOptionData 完成后将调用

showFancyBox

Answer 2

尝试使用$.when：

$.when(test.getOptionsData()).done(openFancyBox);

Answer 3

来自jQuery版本1.5

尝试：

var test = {

        'getOptionsData': function () {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
            }

            return $.ajax({ //return the promise
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });
        },

        'showFancyBox': function () {

          test.getOptionsData().done(function(){ //use done instead of then if the version is below 1.8
                test.openFancyBox();
          }); 
        },
    }

jquery等待ajax方法调用

3 个答案: