javascript - jQuery 阻止 onmouseover 事件

Question

我已经搜索了一段时间，但还没有结果..我有多个带有动画的鼠标悬停事件。因此，如果仍有其他动画正在运行，我希望能够禁用鼠标悬停事件的发生。

我已经玩了很多 jQuery.stop() 但不可能让它工作。我实际上不确定将该代码放在我的函数中的何处..

这是我的带有 map 的 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;
                }
            }
        }
    });
}