2

とのいくつかのインスタンスを使用する、私が作成したcodepen デモsetTimeoutがありsetIntervalます。setIntervalユーザーがページを離れた場合に問題があることがわかりました。

この間隔の実行中にページを離れると、数値が永遠に増加し続けることに気付くかもしれません。間隔は本質的にクリアされていません。それ以外の場合、これは問題なく機能します。

setInterval内ののインスタンスの 1 つの例を次に示しますsetTimeout。

setTimeout(function() {
  var x = parseInt($one.text());

  handle = setInterval(function() {
    if (x > -5) {
      x--;
      $one.html(x + 'px');
    }
    else {
      clearInterval(handle);
      handle = null;
    }
  }, 200);

  $box.animate({
    boxShadow: '-5px 0 0 0 #333'
  }, 2000);

}, 7000);

if/else ステートメントにclearInterval(handle)との両方を追加しようとしましたが、ユーザーがページを離れた場合にクリアする間隔を取得できません。handle = nullこれにアプローチできる他の方法はありますsetIntervalか？これは単なる JavaScript の制限ですか?

アップデート

奇妙なことに、x値をログに記録すると、コンソールに -1 から -4 の数値が正しく表示されます。clearInterval別のウィンドウから実行されませんか?

4

1 に答える 1

4

setTimeoutこのような代わりに使用できますsetInterval:-

setTimeout(function() {
    var x = parseInt($one.text());
    function callOnTimeOut(){
        setTimeout(function() {
            if (x > -5) {
                x--;
                $one.html(x + 'px');
                callOnTimeOut();
            }
        }, 200);
    }
    callOnTimeOut();

    $box.animate({
        boxShadow: '-5px 0 0 0 #333'
    }, 2000);

}, 7000);
于 2013-10-16T14:35:16.313 に答える