Javascript调用太快了

Javascript calling so fast

本文关键字：调用 Javascript      更新时间：2023-09-26

我有一个烦人的小问题。我有一段代码，它从page2加载内容并将其附加到#content。这是有效的，但有时会发生两次，然后在第2页之前追加第3页。这是因为在第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 {
      }
   }

添加一个变量，跟踪是否加载下一个页面，然后仅在当前未加载其他页面时加载。这是你问题的根源。.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 {
    }
}

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

相关文章：