1. ホーム
  2. javascript

[解決済み] 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);
}

ということで、出力は以下のようになります。

http://jsfiddle.net/TTkre/

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 を停止させる方法を見つけたい。 そのもの というように、ある完了条件が満たされたことを検出することによって、物事を停止させます。