javascript - jQuery - 在某个滚动位置后停止/取消滚动事件回调

Question

我希望数字计数到它的指定值并留在那里，但是因为每次页面滚动到特定高度以下时都会调用该函数，然后它又回到 1。

解决方案是让它在页面滚动到特定高度以下时只调用一次该函数。

我试过将 .one() 方法放在几个地方，但这没有帮助

http://jsfiddle.net/d7vKd/1543/

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $("#mydiv").position().top) {
    window.randomize = function() {
      $('.radial-progress1').attr('data-progress', Math.floor(94));
    };
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 6000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
    setTimeout(window.randomize, 200);
  }
})

Answer 1

你应该 unbind您的 scroll 事件一旦回调满足其要求:

$(document).on('scroll.someName', function(){
  var isPassedPos = $(this).scrollTop() >= $("#mydiv").position().top;

  if( isPassedPos ){
    $(document).off('scroll.someName') // <-------------- remove the event listener

    window.randomize = function() {
      $('.radial-progress1').attr('data-progress', Math.floor(94));
    };

    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 6000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });

    setTimeout(window.randomize, 200);
  }
})