Question

我有此网页，该网页在加载后运行带有某个AJAX调用的函数（ loadListItems ），以填充包含10个项目的列表（递归过程中有多个调用，以获取10个项目）有效项目）。

页面上有一个按钮，该按钮始终可见，并且该按钮用于加载列表中的其他项（接下来的10个VALID项）。该按钮也会调用 loadListItems 。

我希望单击按钮以调用 loadListItems 函数，但是，如果该函数的上一次调用未完成，则我希望将新调用排队，因此它会在完成时运行。 / p>

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]);
   }
}

这就是您想要的。但是，请查看评论以获得更好的建议。这不是一个好的解决方案。

确保仅在上一个函数完成运行时调用JavaScript函数

1 个答案: