javascript - Vanilla Js : Start a while loop in one event, 用第二个事件打破它？ ('mouseover'开始， 'mouseout'设置循环条件为假)

Question

我想重复以 'mouseover' 开头的动画事件直到'mouseout'事件被触发。我尝试过包装 'mouseover'在给定其条件全局范围后，在 while 循环中执行操作，然后将其条件设置为 false在 'mouseout'回调，但 while 循环不会中断。我尝试分配 'mouseout' while 循环的外部和内部都具有相同的结果。

是否有一种事件驱动的方法来打破在另一个事件的回调中开始的 while 循环？我总体上对这个问题很好奇，特别是如何将解决方案应用于 'mouseover' 的上下文和'mouseout'事件。谢谢!

另外:下面的代码片段按原样工作。我注释掉了错误的 while 循环逻辑。如果动画按照我想要的方式工作，它应该继续从 Google map 上的同一中心放射出金环，直到 mouseout发生。减去 while 循环，它可以工作，但只能运行一次。

var haloRad = 1;
var center = {lat:20.0000,lng:20.0000};
var hrefHalo = new google.maps.Circle({
  'strokeColor'  : 'RGB(255,255,100)',
  'strokeOpacity': 1,
  'strokeWeight' : 3,
  'fillColor'    : 'RGB(255,255,100)',
  'fillOpacity'  : 0, 
  'map'          : null,
  'center'       : center,
  'radius'       : haloRad,
});
// var isOver;

a.addEventListener('mouseover', function(){
  // isOver = true;
  hrefHalo.setMap(map); 
  // while(isOver){
       var i = 1;     
       for (; i <= 10; i++){
          (function animateHalo(i){
             setTimeout(function(){
                hrefHalo.setRadius(haloRad * (1 + (i / 10)));
             }, i * 75)
          })(i)
        }
  // }
});

a.addEventListener('mouseout', function(){
  // isOver = false;
  hrefHalo.setMap(null);
});

Answer 1

我创建了两种不同的方法来实现此目的。

1. 使用 JavaScript 和“hackish”方式取消 setInterval

2. 使用 Jquery 和 animate 及其 stop() 函数。

这个 fiddle 显示了两者的作用。在您的代码中实现其中之一，我没有 HTML 或 CSS 来复制您的问题。

https://jsfiddle.net/6oL7xg5n/2/

var myVar;

function myFunction() {
    var h = $(".orange").height();
    myVar = setInterval(function(){ 
    console.log("hllo");
    $(".orange").height(h);
        h++;
    }, 30);
}

function myStopFunction() {
    clearTimeout(myVar);
}

$(".orange").on("mouseover", function() {
    myFunction();
});

$(".orange").on("mouseout", function() {
    myStopFunction();
});
// Jquery version
$(".apple").on("mouseover", function() {
    // Used "1000px" but you can use a different value or a variable
    $(this).animate({height: "1000px"}, 8000);
});

$(".apple").on("mouseout", function() {
    $(this).stop();
});