Убедитесь, что функция JavaScript вызывается, только если предыдущая функция завершает работу

Question

У меня есть эта веб-страница, которая при загрузке запускает функцию ( loadListItems ) с некоторыми вызовами AJAX, чтобы заполнить список 10 элементами (в рекурсивном вопросе есть несколько вызовов, чтобы получить 10 VALIDitems).

На странице есть кнопка, которая видна постоянно, и эта кнопка предназначена для загрузки дополнительных элементов в списке (следующие 10 VALID-элементов).Кнопка также вызывает loadListItems .

Я хочу, чтобы нажатие кнопки вызывало функцию loadListItems , однако, если предыдущий вызов функции не завершен, яхотите поставить в очередь новый вызов, чтобы он выполнялся всякий раз, когда завершается.

function pageLoad() {
   loadListItems();
}

var finished = false;
function loadListItems() {
   jQuery.ajax({
            url: ...
   }).done(function (data) {
      //do stuff with the data
      if (not enough data loaded) {
          //then call again recursively
          loadListItems();
      } else {
          //we're done
          var finished = true;
      }
    });
}

function buttonHandler() {
   if (finished) {
       loadListItems()
   } else {
       //run loadListItems whenever it finishes.
   }
}

Как этого добиться?

Answer 1

Как вы сказали, создайте очередь и позвоните ей после окончания.

function pageLoad() {
   loadListItems();
}

var finished = false;
// you may just increase or decrease a number 
// but in case you need to call it with parameters, use array
var queue = [];

function loadListItems() {
   // you need to set finish flag to false whenever you start call
   finish = false;
   jQuery.ajax({
       url: ...
   }).done(function (data) {
      //do stuff with the data
      if (not enough data loaded) {
          //then call again recursively
          loadListItems();
      } else {
          // check queue
          if(queue.length > 0) {
              var params = queue.shift();
              // call with params or not
              loadListItems();
          } else {
              finished = true;
          }
      }
   });
}

function buttonHandler() {
   if (finished) {
       loadListItems()
   } else {
       //run loadListItems whenever it finishes.
       queue.push([parameters to retrieve data]);
   }
}

Это то, что вы хотите.Но, пожалуйста, проверьте комментарии для лучшего совета.Это не хорошее решение.