イベントで始まるアニメーションを'mouseout'
イベントがトリガーされるまで繰り返す必要があります。私は'mouseover'
アクションをwhileループの条件グローバルスコープを与えた後にラップしようとしましたが、'mouseout'
コールバックで条件をfalse
に設定しましたが、whileループは中断しません。 whileループの外側と内側の両方に'mouseout'
を割り当ててみましたが、同じ結果が得られました。Vanilla Js:あるイベントでwhileループを開始し、2回目のイベントで中断しますか? ( 'mouseover' start、 'mouseout'はループ条件をfalseに設定します)
別のイベントのコールバックで開始された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);
});
Javascriptがシングルスレッドです。関数のマウスオーバーが始まると、他のイベントハンドラを呼び出す前に終了しなければなりません。だから、コードの他の部分からwhileループを壊すことはできません。それぞれの反復を非同期にする必要があります。 whileループの代わりにsetTimeoutベースの擬似ループを使用します。 – nnnnnn
クールですが、私のforループのsetTimeoutクロージャを使って、私がすでに行ったことではありませんか?または、私が持っているコードで "i"の制限条件を本当に大きく設定してから、mouseoutイベントでclearTimeoutを呼び出すことを意味しますか?(両方のイベントリスナーの範囲外でタイマー変数を設定すると仮定します)しかし、それはまだ私には問題があるようです。それがシングルスレッドで、他のものが呼び出される前にそのイベントを完了する必要がある場合、「i」を非常に大きくするとスレッドを結ぶでしょうか?申し訳ありませんが、これはあまり言われていない/明白な点がありません。それは私の新しい領域です。ありがとう! – Ovid2020