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

您可以使用变量来检查您是否已经滚动

试试这个：

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

               });
             }
      }) 
      }
    });

Answer 2

你需要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
      }
   }) 
});