[解決済み] setTimeoutループを止めるには?
2023-06-10 20:15:35
質問
画像スプライトを使ったローディングインジケータを作ろうとしていて、以下のような関数を思いつきました。
function setBgPosition() {
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c<numbers.length)
{
setTimeout(run, 200);
}else
{
setBgPosition();
}
}
setTimeout(run, 200);
}
ということで、出力は以下のようになります。
setBgPosition();を使用しなければなりませんでした。ループでこれを実行し続けるために、今私の問題は、[load finished]を望むと、このループを停止する方法ですか?
どのように解決するのですか?
setTimeout
はタイマーハンドルを返し、それを使ってタイムアウトを止めることができます。
clearTimeout
.
だから例えば
function setBgPosition() {
var c = 0,
timer = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c >= numbers.length) {
c = 0;
}
timer = setTimeout(run, 200);
}
timer = setTimeout(run, 200);
return stop;
function stop() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
}
というように使うんですね。
var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();
ただし
setBgPosition
を再び呼び出すのではなく、単に
c
に戻して
0
. そうでなければ、これはうまくいかないでしょう。また、私が
0
をタイムアウトが保留されていないときのハンドルの値として使っていることにも注目してください。
0
の有効な戻り値ではありません。
setTimeout
の有効な戻り値ではないので、これは便利なフラグになります。
これもまた、私が考える(数少ない)場所の1つであり、そのような場所では
setInterval
よりも
setTimeout
.
setInterval
を繰り返す。だから
function setBgPosition() {
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c >= numbers.length) {
c = 0;
}
}
return setInterval(run, 200);
}
このように使用します。
var timer = setBgPosition();
// ...later, when you're ready to stop...
clearInterval(timer);
上記のことはともかく、私は
setBgPosition
を停止させる方法を見つけたい。
そのもの
というように、ある完了条件が満たされたことを検出することによって、物事を停止させます。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] BlobからArrayBufferへ移行する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?