Not repeating the function once waypoint reached

Question

Here is the JS for the waypoint call and graph bar function. It repeats every time the waypoint is reached and I would like it to recognise that the waypoint has been reached once already ad not to repeat function. Thanks for your help. :)

$.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)

    });
    });

Answer 1

If you don't want a waypoint to keep triggering you can destroy it. To ensure it only runs once, you can destroy it at the end of your handler. The this keyword refers to the waypoint instance you can call destroy on within the handler.

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