到达航点后不重复该功能

Not repeating the function once waypoint reached

本文关键字:功能      更新时间:2023-09-26

这是航点调用和图形栏函数的JS。每次到达航点时它都会重复,我希望它认识到已经到达过一次航点并且不重复功能。感谢您的帮助。:)

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {
    $('#jack_bellamy').waypoint(function() {
        setTimeout(function start (){
      $('.bar').each(function(i)
      {  
        var $bar = $(this);
        $(this).append('<span class="count"></span>')
        setTimeout(function(){
          $bar.css('width', $bar.attr('data-percent'));     
        }, i*100);
      });
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).parent('.bar').attr('data-percent')
        }, {
            duration: 2000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now) +'%');
            }
        });
    });
    }, 500)
    });
    });

如果你不希望航点继续触发,你可以摧毁它。若要确保它只运行一次,可以在处理程序结束时销毁它。this 关键字是指可以在处理程序中调用 destroy 的航点实例。

$('#jack_bellamy').waypoint(function() {
  // all that animation stuff you mentioned
  this.destroy();
});