调用函数一次

Question

我有jQuery函数counter，我需要调用它，当我滚动页面

$(document).ready(function() { 

    $.fn.counter = function() { 
     $(this).each(function() { 
      var num = $(this).data('counter'); 
      var i = 1, 
       self = $(this).html(i); 
      var interval = setInterval(function() { 
       self.html(++i); 
       if (i >= num) { 
        clearInterval(interval); 
       } 
      }, 100); 
     }); 
    }; 

    $(window).scroll(function() { 
     var height = $(window).scrollTop(); 

     if(height > 300) { 
      $('.counter-1, .counter-2, .counter-3, .counter-4').counter(); 
     } 
    }); 

}); 

问题是，当我再次滚动向上或向下翻页功能，每一次又一次打来电话，再次。

我试图用这个代码

$(document).ready(function() { 

    $.fn.counter = function() { 
     $(this).each(function() { 
      var num = $(this).data('counter'); 
      var i = 1, 
       self = $(this).html(i); 
      var interval = setInterval(function() { 
       self.html(++i); 
       if (i >= num) { 
        clearInterval(interval); 
       } 
      }, 100); 
     }); 
    }; 

    $(window).one('scroll', function() { 
     var height = $(window).scrollTop(); 

     if (height > 300) { 
      $('.counter-1, .counter-2, .counter-3, .counter-4').counter(); 
     } 
    }); 

}); 

但在这种情况下，重新加载页面功能不叫了。

有没有办法在滚动上只调用一次函数，不要再调用它，而是在重新加载页面后调用它？

Answer 1

您应该使用一个名称空间.on/.off：

$(window).on('scroll.custom', function() { 
    var height = $(window).scrollTop(); 

    if (height > 300) { 
     $('.counter-1, .counter-2, .counter-3, .counter-4').counter(); 
     $(window).off('scroll.custom') 
    } 
});