應用場景：
只要頁面加載了，其中在頁面中出現的li就向控制台輸出第幾個發送請求；在本次加載的頁面中，再將滾動條滾回前邊的li，不再向控制台輸出東西，也就是說已經顯示過的li，不再向控制台輸出東西。
<body>
<ul>
<li onclick="jumpOther()">0001</li>
<li>0002</li>
<li>0003</li>
<li>0004</li>
<li>0005</li>
<li>0006</li>
<li>0007</li>
<li>0008</li>
<li>0009</li>
<li>00010</li>
<li>00011</li>
<li>00012</li>
<li>00013</li>
<li>00014</li>
<li>00015</li>
<li>00016</li>
<li>00017</li>
<li>00018</li>
<li>00019</li>
<li>00020</li>
<li class="ts">00021</li>
<li>00022</li>
</ul>
</body>
思路一：
定義了一個全局變量lastItem，用來記下最后顯示的li的index；如此，當li的index>lastItem,就表示li還沒展示過，能輸出東西。
<script type="text/javascript">
var lastItem=0;
$(document).ready(function () {
sendAsk();
window.addEventListener("scroll",function(e){
sendAsk();
});
});
function sendAsk(){
var lis= $('ul').find("li");
//swHeight=滾動的高度+窗體的高度；當li的offset高度<=swHeight,那么說明當前li顯示在可視區域了
var swHeight=$(window).scrollTop()+$(window).height();
$.each(lis, function (index, item) {
mTop=item.offsetTop;
var dItem=index+1;
if(mTop<swHeight&&dItem>lastItem){
console.log(index+1+"個發送請求 ");
lastItem+=1;
}
});
}
</script>
思路二：
給每個li動態添加一個屬性，用來表示這個li是否顯示過；在發送請求后，設置屬性為true即可；未顯示過不添加屬性即可。
function sendAsk() {
var lis= $('ul').find("li");
//swHeight=滾動的高度+窗體的高度；當li的offset高度<=swHeight,那么說明當前li顯示在可視區域了
var swHeight=$(window).scrollTop()+$(window).height();
$.each(lis, function (index, item) {
mTop=item.offsetTop;
if(mTop<swHeight&&!item.getAttribute("data-send")){
console.log(index+1+"個發送請求 ");
item.setAttribute("data-send","true");
}
});
}
思路三：
利用getBoundingClientRect()方法，只要其中的.top<=可視區域的高度即可
function sendAsk(){
var lis= $('ul').find("li");
//swHeight=滾動的高度+窗體的高度；當li的offset高度<=swHeight,那么說明當前li顯示在可視區域了
var swHeight=$(window).height();
$.each(lis, function (index, item) {
mTop=item.getBoundingClientRect().top;
console.log(mTop);
if(mTop<=swHeight){
console.log(index+1+"個發送請求 ");
}
});
}