調用函數一次

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