Question

我这里有一个烦人的小问题。我有代码从page2加载内容并将其附加到#content。这有效，但有时会发生两次，然后在page2之前追加page3。那是因为在第3页中，只有一个帖子，但在第2页，4个帖子。

如何让我的代码等到追加完成再次运行？这是我的代码：

$(window).scroll(
  function(){
    if(browserName != "safari") {
      var curScrollPos = $('html').scrollTop();
    }
    else {
      var curScrollPos = $('body').scrollTop();
    }

    if(curScrollPos > 218) {
      $("#sidebar").addClass("open");
    }

    if(curScrollPos < 218) {
      $("#sidebar").removeClass("open");
    }

    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

    if(scrollBottom == 0) {
      if(home != 0 || search != 0 || category != 0) { 
        if(currentPage < numPages) {
          $("#main .loader-posts").fadeIn();
          currentPage++;

          if(search == 1) {
            var getPostsUrl = "page/"+currentPage+"/?s="+searchTerm;
          }
          else {
            var getPostsUrl = "page/"+currentPage;
          }

          $.get(getPostsUrl, function(data) {
                  $("#main .loader-posts").fadeOut(
                    'slow',
                    function(){
                      var newPosts = $(data).find("#content").html();
                      $("#content").append(newPosts);
                      $('#container.tiles').masonry('reload');
                    });
                });
        }
      }
      else {

      }
   }

Answer 1

添加一个变量，用于跟踪您是否正在加载下一页，然后仅在您当前未加载其他内容时加载。这是你问题的根源。在加载下一个部分之前，.scroll()可能会触发两次，只要currentPage < numPages它会增加currentPage并再次加载。并且，由于.get()是异步的，因此无法保证在任何后续请求之前完成第一个.get()请求。添加loading状态可以解决此问题。

var loading = 0;  // Loading state

if (scrollBottom == 0) {

    if (home != 0 || search != 0 || category != 0) {

        if (currentPage < numPages && !loading) {  // Only proceed if not loading
            loading = 1; // We have initiated loading

            $("#main .loader-posts").fadeIn();
            currentPage++;

            if (search == 1) {
                var getPostsUrl = "page/" + currentPage + "/?s=" + searchTerm;
            } else {
                var getPostsUrl = "page/" + currentPage;
            }

            $.get(getPostsUrl, function(data) {
                $("#main .loader-posts").fadeOut('slow', function() {
                    var newPosts = $(data).find("#content").html();
                    $("#content").append(newPosts);
                    $('#container.tiles').masonry('reload');
                    loading = 0;  // We are done loading
                });
            });
        }
    } else {

    }

}

Answer 2

也许你可以添加一个你可以在$ .get（）之前检查的isBusy标志，并在$ .get（）回调中将它设置为false？

Javascript调用这么快

2 个答案: