如果我的 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;
        }
});

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

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

javascript

jquery

events

dom

jquery-events