Vanilla Js: Beginne eine While-Schleife in einem Event, breche sie mit einem zweiten Event? ('mouseover' start, 'mouseout' setzt loop condition auf false)

Question

Ich möchte eine Animation wiederholen, die in einem 'mouseover' Ereignis beginnt, bis ein 'mouseout' Ereignis ausgelöst wird. Ich habe versucht, die 'mouseover' Aktion in eine While-Schleife nach dem Geben seiner Bedingung globalen Bereich, dann seine Bedingung auf false im Callback 'mouseout', aber die While-Schleife bricht nicht. Ich habe versucht, die 'mouseout' sowohl außerhalb als auch innerhalb der While-Schleife zuweisen, mit dem gleichen Ergebnis.

Gibt es eine ereignisgesteuerte Möglichkeit, eine While-Schleife zu unterbrechen, die beim Rückruf eines anderen Ereignisses begonnen hat? Ich bin neugierig auf diese Frage im Allgemeinen und insbesondere, wie man eine Lösung auf den Kontext der Ereignisse 'mouseover' und 'mouseout' anwendet. Vielen Dank!

Auch: Das folgende Snippet funktioniert wie es ist. Ich habe die fehlerhafte While-Loop-Logik auskommentiert. Die Animation sollte, wenn es so funktioniert, wie ich es wollte, goldene Ringe von der gleichen Mitte auf einer Google Map ausstrahlen, bis die mouseout auftritt. Minus die While-Schleife, es funktioniert, aber nur einmal.

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

Ich habe zwei verschiedene Arten erstellt, dies zu tun.

1. JavaScript verwenden und die "hackish" Weg setInterval der Aufhebung

2. mit JQuery und animate und seine stop() Funktion.

Diese Geige zeigt beides in Aktion. Implementieren Sie entweder in Ihren Code, ich habe Sie nicht HTML oder CSS, um Ihr Problem zu replizieren.

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