我有一个看似简单的博客项目正在开发中，我正在尝试将 Isotope Jquery 汇集在一起(用于布局/过滤/排序)，Infinite Scroll ，以及通过 Ajax 动态加载所有博客摘录(因此在用户向下滚动页面之前对所有摘录应用过滤和排序(之后它们被加载到 dom 中，然后可访问))。

这个问题主要涉及通过 Ajax 获取博客文章摘录数据，然后将其传递给同位素过滤代码。我不确定执行此操作的最佳方法，但目前我正在尝试使用 ajax 请求遍历每个页面(博客文章摘录)，然后将数据作为一个整体访问。

我遇到了两种不同的方法来循环遍历 ajax 请求，每种方法都使用 then when jquery 语句。第一种是使用 this SO answer 中给出的方法，另一个就是把整个then when $.each 中的语句陈述。

方法一:

  var pageCount = 15;
  var pageCountArray = [];
  for (var i = 1; i != pageCount; ++i) pageCountArray.push(i);

  var deferreds = [];
  $(pageCountArray).each(function() {
    var pageNumber = this;
      deferreds.push(
        $.get('/page/' + pageNumber)
      )

    $.when.apply($, deferreds)
      .then(function(data){
        console.log(data); 
        // this outputs data as a string from the first page, then a list of objects
        console.log(typeof(data));
        // string
        // 13 - object
    });
  });

  var pageCount = 15;
  var pageCountArray = [];
  for (var i = 1; i != pageCount; ++i) pageCountArray.push(i);

  $(pageCountArray).each(function(data) {
    var pageNumber = this;
      $.when(
        $.get('/page/' + pageNumber)
      ).then(function() {
        console.log(data);
        // this outputs 14 strings of data 
        console.log(typeof(data));
        // 14 - string
      })
  });

最佳答案

哇，这是一个很大范围的问题，难怪没有任何回应。这是一个很大的问题，所以我会尽力提供帮助。我创建了许多站点，其中包括同位素的排序/过滤，同时使用 AJAX 预加载和无限滚动，所以这里是我已经写出的最简单的例子之一......

首先，我必须提到，这整个事情在 David DeSandro 的 ImagesLoaded 上效果更好。插入。这主要是因为它允许您在给定容器中放置一个附加到最终图像加载事件的回调函数(一旦事件发生就执行的函数)。哇，好罗嗦。如何更好地表达...它基本上是在询问容器，您加载完成了吗？不？现在怎么样？你满载而归？好的，请立即执行此功能，然后...

实现后，我将在我的 onLoad 事件中使用此代码开始，就像这样......

$(function() {

    extendJQ_PreLoad(); //I Will Get To This Function In A Min

    //Use ImagesLoaded Plugin To Control Load Time Sync
    $(container).imagesLoaded(function() {
        cont.isotope({
            itemSelector: ".box", //This is the class I use on all my images to sort
            layoutMode: "masonry",
            isOriginLeft: true,
            isFitWidth: true,
            filter: "*",
            masonry: {
                columnWidth: ".box"
            }
        });
        preLoadNextImgSet(); //I Will Get To This Function In A Min
    });
});

function extendJQ_PreLoad() {
    $.preloadImages = function(args) {
        for (var i = 0; i < args.length; i++) {
            $("<img />").attr("src", args[i]);
        }
    }    

} //end function

function preLoadNextImgSet() {
    $.post('AjaxController/ajaxPreload_Gallery.php', {currStart: start, currSize: loadSize}, function(data) {
        if(data!="") {
            var y = $(document.createElement("div")).append(data).find("a"),
                found = [];
            y.each(function() {
                found[found.length] = "img/gallery/" + $(this).text();
            });
            $.preloadImages(found);
        }
    });

} //end function

    $(window).scroll(function(){
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        docuHeight = $(document).height();

        //AJAX Data Pull
        if(((scrollTop + windowHeight)+35) >= docuHeight){
            getNextImages();
        } 
    });

function getNextImages() {
    cont = $(container);
    $.post('AjaxController/ajaxPortfolio_Gallery.php', {currStart: start, currSize: loadSize}, function(data) {
        if(data!="") {
            //Append New Photos Inside <a> Element Tag
            var y = $(document.createElement("div")).append(data).find("a");
            cont.append(y);
            //Fix Image Layouts
            cont.imagesLoaded(function() {
                //Feed Isotope Layout The New Items
                cont.isotope("appended", y);
                cont.find("a").css({"opacity":"1"});
            });

        } else { unFilled = false; }
    });
}

关于javascript - 循环遍历 jQuery Then When 的 Ajax 请求的两种方法 - 使用哪个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23937065/