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); 

       }); 
      } 
     }) 
     } 
    });