Vanilla Js：あるイベントでwhileループを開始し、2回目のイベントで中断しますか？ （ 'mouseover' start、 'mouseout'はループ条件をfalseに設定します）

Question

イベントで始まるアニメーションを'mouseout'イベントがトリガーされるまで繰り返す必要があります。私は'mouseover'アクションをwhileループの条件グローバルスコープを与えた後にラップしようとしましたが、'mouseout'コールバックで条件をfalseに設定しましたが、whileループは中断しません。 whileループの外側と内側の両方に'mouseout'を割り当ててみましたが、同じ結果が得られました。

別のイベントのコールバックで開始されたwhileループを中断するイベント駆動型の方法はありますか？私は、一般的にはこの質問に興味があります。具体的には、'mouseover'と'mouseout'というイベントの解決策をどのように適用するのが好きですか。ありがとう！

また、下記のスニペットはそのまま使用できます。私は間違ったループロジックをコメントアウトしました。アニメーションは、私が望むように機能していれば、mouseoutが発生するまで、Googleマップ上の同じセンターからゴールドリングを放つようにしてください。 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

私はあなたがこれを行うことができる2つの異なる方法を作成しました。 JavaScriptとjQueryとanimateとそのstop()機能を使うsetInterval

をキャンセルする "ハック" の方法を使用して

1. 。

このフィドルは両方とも動作しています。あなたのコードに実装するか、あなたの問題を再現する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(); 
});