jQuery防止onmouseover事件

Question

我一直在尋找一段時間，但沒有結果..我有多個帶動畫的mouseover事件。所以我希望能夠禁用鼠標懸停事件發生，如果還有其他動畫運行..

我一直玩jQuery.stop()很多，但不可能使其工作。我其實不知道在哪裏把我的函數中這個代碼..

這裏是我的HTML與地圖：

<img src="assets/menu588x588.png" alt="" usemap="#map" /> 
    <map id="map" name="map"> 
     <area onmouseover="driveTo(330);" shape="poly" coords="93, 264, 2, 270, 7" /> 
     <area onmouseover="driveTo(300);" shape="poly" coords="122, 336, 101, 390" /> 
     <area onmouseover="driveTo(230);" shape="poly" coords="370, 335, 446, 388, 3574" /> 
    </map> 

而我的JS功能與一些超時和動畫：

function driveTo(new_position){ 
       $(function() { 
       var pre_position = Number(document.getElementById("pre-position").value); 
       var goal   = 360 - pre_position + new_position; 
       var $elem   = $(".car-box"), degree = pre_position, timer; 

       rotate(goal); 

       function rotate(goal) { 
        $elem.css({ 'transform': 'rotate(' + degree + 'deg)'}); 

        if(new_position < pre_position){ 
        if(goal > 0){ 
         timer = setTimeout(function() { 
          --goal; 
          ++degree; 
          rotate(goal); 
         },5); 
        } 
        if(goal === 0){ 
         document.getElementById("pre-position").value = new_position; 
        } 
        } 
       } 
       }); 
      } 

我害怕在所有那些內在功能中有點迷失..

非常感謝您提前的任何建議！

Answer 1

試試這個：

var inProgress = false; 
function driveTo(new_position){ 

    if(inProgress){ 
     return; 
    } 


    $(function() { 
     inProgress = true; 

     var pre_position = Number(document.getElementById("pre-position").value); 
     var goal   = 360 - pre_position + new_position; 
     var $elem   = $(".car-box"), degree = pre_position, timer; 

     rotate(goal); 

     function rotate(goal) { 
      $elem.css({ 'transform': 'rotate(' + degree + 'deg)'}); 

      if(new_position < pre_position){ 

       if(goal > 0){ 
        timer = setTimeout(function() { 
         --goal; 
         ++degree; 
         rotate(goal); 
        },5); 
       } 
       if(goal === 0){ 
        document.getElementById("pre-position").value = new_position; 
        inProgress = false; 
       } 
      } 
     } 
    }); 
}