'How can I make my mouseenter function not execute if it's already executing?

Simple problem: so I have a mouseenter function

    $('.filmstrip').bind('mouseenter',function(){
        var isStopped = false;
        var $that = $(this),
               w = $that.width(),
              fr = $that.attr('data-framerate');
        $that.css('background-position',$that.attr('data-placeholderXStart') + ' center');
        $that.css('background-image','url('+$that.attr('data-gifurl')+')');
        for ( var i = 1, n = $that.attr('data-ticks'); i <= n && !isStopped; ++i )
        {
            (function(j){
               setTimeout(function(){
                  if (!isStopped) {
                      $that.css('background-position','-'+(w*j)+'px center');
                  }
               }, j*fr);
            })(i);
        }
        $that.bind('mouseleave',function(){
            isStopped = true;
            $that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position',$that.attr('data-placeholderXStart') + ' center');
        });
        
    });

and I want it to execute only if it's not already in the process of executing. The reason is because I don't want someone to re-hover over the thing and make it start while it's still animating.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I make my mouseenter function not execute if it's already executing?

Sources

Related Questions