jQuery - 在嵌套的每個循環中僅迭代一次

Question

我一直試圖遍歷每個部分中的一組列表項只有一次。也就是說，在滾動到特定的部分時，我想要一組列表項來迭代一次。這不應該重複持續滾動。

我寫的代碼遍歷每個部分以及部分中的每個列表項，但它會在每個滾動條上繼續。

我想這隻遍歷每個部分一次。

$(window).scroll(function(){ 
      var windscroll = $(window).scrollTop(); 
      $('body section').each(function(e){ 
      if($(this).position().top < windscroll){ 
       $(this).find(".inner-skills li").each(function(i){ 
       $(this).delay(i*500).animate({ 
       "width":"200px", 
       "opacity":1 
       },500); 

       }); 
      } 
      }) 
     }); 

Answer 1

你需要unbind它：

$(window).scroll(function(){ 
    var windscroll = $(window).scrollTop(); 
    $('body section').each(function(e){ 
     if($(this).position().top < windscroll){ 
     $(this).find(".inner-skills li").each(function(i){ 
      $(this).delay(i*500).animate({ 
       "width":"200px", 
       "opacity":1 
      },500); 
     }); 
     } 
    }) 
    $(window).unbind('scroll'); 
}); 

編輯：

$(window).scroll(function(){ 
    var windscroll = $(window).scrollTop(); 
    $('body section').not('.completed').each(function(e){ //Loop through all sections WITHOUT class of completed 
     if($(this).position().top < windscroll){ 
     $(this).find(".inner-skills li").each(function(i){ 
      $(this).delay(i*500).animate({ 
       "width":"200px", 
       "opacity":1 
      },500); 
     }); 
     $(this).addClass('completed'); // add class of completed so it wont loop through this anymore 
     } 
    }) 
}); 

Answer 2

您可以使用一個變量來檢查，如果你已經滾動或不

試試這個：

var already_scrolled = 0; 
$(window).scroll(function(){ 
     if(already_scrolled == 0){ 
     already_scrolled = 1; 
     var windscroll = $(window).scrollTop(); 
     $('body section').each(function(e){ 
      if($(this).position().top < windscroll){ 
       $(this).find(".inner-skills li").each(function(i){ 
       $(this).delay(i*500).animate({ 
        "width":"200px", 
        "opacity":1 
       },500); 

       }); 
      } 
     }) 
     } 
    });