Vanilla Js：在一个事件中启动 while 循环，在第二个事件中中断它？（'mouseover'开始，'mouseout'设置循环条件为假）

Question

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

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

另外：下面的代码片段按原样工作。我注释掉了错误的 while 循环逻辑。动画应该，如果它按我想要的方式工作，继续从 Google 地图上的同一中心辐射出金环，直到 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

我已经为您创建了两种不同的方法。

使用JavaScript和"hackish"方式取消setInterval
使用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();
});

Vanilla Js：在一个事件中启动 while 循环，在第二个事件中中断它？（'mouseover'开始，'mouseout'设置循环条件为假）

Vanilla Js: Start a while loop in one event, break it with a second event? ('mouseover' start, 'mouseout' sets loop condition to false)

javascript

mouseevent

while-loop

dom-events

Vanilla Js：在一个事件中启动 while 循环，在第二个事件中中断它？ （'mouseover'开始，'mouseout'设置循环条件为假）

Vanilla Js: Start a while loop in one event, break it with a second event? ('mouseover' start, 'mouseout' sets loop condition to false)

javascript

mouseevent

while-loop

dom-events

Vanilla Js：在一个事件中启动 while 循环，在第二个事件中中断它？（'mouseover'开始，'mouseout'设置循环条件为假）