如果我的 mouseenter 函数已经在执行，我怎样才能让它不执行？

Question

简单的问题：所以我有一个 mouseenter 功能

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

    });

并且我希望它仅在它尚未处于执行过程中时才执行。 原因是因为我不希望有人将鼠标重新悬停在该事物上并使其在仍处于动画状态时启动。

Answer 1

创建一个全局变量，指示与鼠标输入事件关联的函数的状态

    var isMouseEnterRunning = false;
    $('.filmstrip').bind('mouseenter',function(){

        if(!isMouseEnterRunning){ 
            isMouseEnterRunning = true;   
            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');
            });
            isMouseEnterRunning = false;
        }
});