收集適當onScroll數據觸發AJAX功能

我上滾動調用一個AJAX功能與此：收集適當onScroll數據觸發AJAX功能

// Collecting scroll info 
$('.overthrow').each(function() { 

    var self = this; 
    var path2root = "."; 
    var subcategoryId = $(this).attr('data-subcategoryId'); 
    var page = 1; 

    $(this).bind('scroll', function() { 

    var scrollAmount = $(self).scrollLeft(); 
    var documentWidth = $(self).data('currentElementPosition') || $(document).width(); 
    var scrollPercent = (scrollAmount/documentWidth) * 100; 

    if (scrollPercent > 80) { 

     page++; 

     console.log("process.php?subcategoryId=" + subcategoryId + "&page=" + page); 

     // AJAX function for processing JSON 
     $.ajax({ 
     url: "process.php?subcategoryId=" + subcategoryId + "&page=" + page, 
     type: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      for(i = 0 ; i < data.length; i++) { 
      var articleId = data[i].articleResult.articleId; 
      var title = data[i].articleResult.title; 
      var subhead = data[i].articleResult.subhead; 
      var image = data[i].articleResult.image; 
      var response = "<td><div class='articleResult'><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'><img src='" + image + "' width='120'/></a><br><h3><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'>" + title.substring(0,25) + "</a></h3></div></td>"; 

      var appendedData = $(self).find("table tbody tr td:last-child").after(response).fadeIn('slow'); 
      $(self).data('currentElementPosition', appendedData.position().left); 
      }; 
     } 
     }); 
    }; 
    }); 
});

我的問題是，一旦第一個響應被附加到的內容和我開始滾動過去的80％到新的結果，我滾動的每個像素再次調用相同的AJAX函數&，而不是等待用戶滾動新窗口大小的80％寬度。有效地使每個像素的AJAX調用滾動超過80％。

是if聲明錯誤的路線去與這樣的事情？我是否應該提供某種類型的回調來動態地驅動觸發AJAX功能的整數？

來源

2012-09-25 robabby

另一種方法是將其保存到任何你追加到DOM作爲參考你的AJAX調用的結果，得到它的位置，並比較你的滾動位置。換句話說，假設在你上面的例子，$（這）是其中通過AJAX返回的所有數據插入到父容器，你可以做這樣的事情：

$(this).scroll(function() { 
       var scrollAmount = $(this).scrollLeft(); 
       var documentWidth = $(this).data('currentElementPosition') || $(document).width() 
       var scrollPercent = (scrollAmount/documentWidth) * 100; 
        if (scrollPercent > 80) { 
         // AJAX function success 
          var appendedData = $(data_returned_from_ajax_call).appendTo($(this)) 
          $(this).data('currentElementPosition', appendedData.position().left) 
        }; 
        }); 
}

只是一個供參考的重要需要注意的是，jQuery的.offset（）方法會給你元素相對於文檔的位置，而.position（）會給你相對於其父容器的位置。

來源

2012-09-25 20:39:29 ramzyo

這似乎是一個有趣的解決方案。在最後一個小時內一直在使用它，但是一天結束，所以我會在晚些時候或明天再次跳回來並報告我的結果。 +1現在 – robabby

很好聽！讓我知道是否有任何事情可以幫助你。 – ramzyo

我在再次查看代碼示例時注意到的一件事是，您可能實際上在AJAX成功函數中失去了$（this）的預期範圍。如果是這樣的話，我不記得我的頭頂。如果你發現這是一個問題，你可以在滾動回調的任何地方保存一個變量（例如右上方的var scrollAmount = ...）var self = this然後，從你的AJAX成功函數中，你可以引用$ （self）.data（'currentElementPosition'，attachedData.position（）。left）來達到合適的範圍 – ramzyo

我會使用jQuery的one()一次綁定，然後在成功回調爲您阿賈克斯重新綁定（或之後任何地方）

來源

2012-09-25 20:11:12 saml

收集適當onScroll數據觸發AJAX功能

回答

相關問題