jquery wait for ajax метод call

Question

getOptionsData выполняет вызов ajax, чтобы получить список опций и обновлений в div div fancybox. После того, как вызов ajax getOptionsData окончен, необходимо показать fancybox, вызвав openFancyBox.

Я думаю, что лучшее место для размещения метода openFancyBox должно быть внутри функции «success» в getoptionsData. Но эта функция уже используется во многих местах, где этот fancyBox не нужен.

Как смоделировать это поведение из метода showFancyBox(). Потому что текущая реализация ниже не ждет завершения getoptionsData ajax до вызова fancyBox.

Я попытался использовать «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(); 
      }); 
     }, 

    } 

showFancyBox будет называться после getOptionData закончил

Answer 2

Попробуйте использовать $.when:

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

Answer 3

С JQuery версии 1.5

Try:

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(); 
      }); 
     }, 
    }