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

Question

I'd like to repeat an animation that begins in a 'mouseover' event until a 'mouseout' event is triggered. I've tried wrapping the 'mouseover' action in a while loop after giving its condition global scope, then setting its condition to false in the 'mouseout' callback, but the while loop doesn't break. I tried assigning the 'mouseout' both outside and inside of the while loop, with the same result.

Is there an event-driven way to break a while loop that had begun in another event's callback? I'm curious about this question in general, and specifically, how to apply a solution to the context of 'mouseover' and 'mouseout' events. Thanks!

Also: The snippet below works as-is. I commented out the faulty while loop logic. The animation should, if it worked as I wanted, keep radiating out gold rings from the same center on a Google Map, till the mouseout occurs. Minus the while loop, it works, but only once.

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

I have created two different ways you can do this.

1. Using JavaScript and the "hackish" way of canceling setInterval

2. Using Jquery and animate and its stop() function.

This fiddle shows both in action. Implement either into your code, I do not have you HTML or CSS to replicate your problem.

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();
});