ES6でタイマーをクリアする方法

2 つのメソッド: 1. setTimeout タイマーをクリアするには、clearTimeout() を使用します (構文「clearTimeout (タイマー戻り値)」)。2. setInterval タイマーをクリアするには、clearInterval() を使用します。構文「clearInterval (戻り値)」 ）」。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

#JS の 2 つのタイマー

window.setTimeout([関数],[間隔]) #タイマーを設定し、待ち時間を設定します。時間が経過すると、対応するメソッドが実行され、メソッドの実行が完了するとタイマーが停止します。

window.setInterval([関数],[間隔])

タイマーを設定し、待ち時間を設定し、時間になったら対応するメソッドを実行します。

メソッドの実行が完了しても、タイマーは停止しません。対応するメソッドは、手動でタイマーをクリアするまで、今後も定期的に再実行されます。

注: setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。

タイマーの戻り値

JS のタイマーには戻り値があり、戻り値は現在のタイマーを表す数値です。

var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 当前是第二个定时器
var timer3=window.setTimeout(function(){},1000);   //timer3->3 当前是第三个定时器

なお、タイマーをクリアしても戻り値はクリアされず、後から設定したタイマーの戻り値は戻り値に基づいてキューイングされ続けます。

タイマーをクリアする方法タイマーが時間内にクリアされない場合、メモリ オーバーフローが発生する危険性があります。したがって、タイマーを使用する場合は、適切なタイミングでタイマーをクリアすることを考慮する必要があります。

クリア タイマーには 2 つの関数があります。

setTimeout の破棄関数は、clearTimeout です。
setInterval の破棄関数は、次のとおりです。 clearInterval

setInterval オブジェクトまたは setTimeout オブジェクト、これら 2 つのタイマー オブジェクトは、ウィンドウ オブジェクトが破棄されたときにのみスタック スペースからリサイクルされます。変数のポインタを null を指すように変更しても、ガベージ コレクション マシンに自動的にリサイクルするように通知することはできません。ウィンドウ オブジェクトを閉じる前にウィンドウ オブジェクトのスタック メモリ内の setInterval オブジェクトを破棄する場合は、clearInterval

clearTimeout(id_of_settimeout)

# を介してのみ破棄できます。 ##定義: setTimeout()メソッドで設定したスケジュール実行機能をブロック/キャンセルします。

パラメータ: id_of_settimeout は、setTimeout() 関数を呼び出したときに返される ID 値であり、返された識別子をパラメータとして使用すると、setTimeout() で設定されたスケジュールされた実行操作をキャンセルできます。

注:clearTimeout(id_of_setinterval) メソッドを使用するには、スケジュールされた操作を作成および実行するときにグローバル変数を使用します。

var myVar = setTimeout(function(){ alert("Hello"); }, 3000);
clearTimeout(myVar);

setTimeOut を時間内にクリアする必要がありますか

• function testTimeout () {
  	console.log('1111')
  	console.log(setTimeout(testTimeout, 3000));
  }

  上記のコードは testTimeout を再帰的に呼び出しますが、setTimeout は常に setTimeout オブジェクトを生成します。GC によってリサイクルされますが、時間は不確かです。これはより危険であり、メモリ オーバーフローを引き起こす可能性があります。

したがって、setTimeout オブジェクトが継続的に作成され、GC によってリサイクルされないようにするには、各 setTimeout の前に clearTimeout を呼び出す必要があります。

var timeHandle = null;
function testTimeout () {
    if (timeHandle) {
    	// 调用之前，先清理，防止一直生成对象
    	// ps. setInterval 定时器也应该按这种模式处理
    	clearTimeout(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setTimeout(testTimeout, 3000));
}

clearInterval(id_of_setinterval)

定義: setInterval()関数で設定したスケジュール実行操作をキャンセル/停止できます。

パラメータ: id_of_setinterval は、setInterval() 関数を呼び出したときに返される ID 値であり、返された識別子をパラメータとして使用することによってのみ、setInterval() で設定されたスケジュールされた実行操作をキャンセルできます。

注: clearInterval() メソッドを使用するには、スケジュールされた操作を作成および実行するときにグローバル変数を使用します。

var myVar = setInterval(function(){ myTimer() }, 1000);
clearInterval(myVar);

時間内に setInterval をクリアする必要がありますか

• function testInterval () {
  	console.log('1111')
  	console.log(setInterval(testInterval, 3000));
  }

  上記のコードは testInterval を再帰的に呼び出しますが、setInterval は常に setInterval オブジェクトを生成します。GC によってリサイクルされますが、時間は不確かです。これはより危険であり、メモリ オーバーフローを引き起こす可能性があります。

したがって、setInterval オブジェクトが継続的に作成され、GC によってリサイクルされないようにするには、各 setInterval の前に clearInterval を呼び出す必要があります。

var timeHandle = null;
function testInterval () {
    if (timeHandle) {
    	// 调用之前，先清理，防止一直生成对象
    	clearInterval(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setInterval(testInterval, 3000));
}

拡張知識: setTimeout を使用して setInterval の動作をシミュレートする

通常: setTimeOut() を再帰的に使用すると、その効果は setInterval() を使用した場合と同等になります

利点:

コードの簡素化

• 非同期キューの関数呼び出しシーケンスの正確性を確保します。setInterval の欠陥により、大量のデータが含まれるため、非同期キュー内の関数呼び出しの実行順序が狂うことがあります。たとえば、この関数の実行が終了する前に、次の関数の実行が開始されますが、再帰ではありません。再帰とは、関数の次のエンティティがスタック領域に再帰的に作成され、現在の関数が実行された後に呼び出されることを意味します。

• //实现的方法挺简单的 ，如下代码
  //参数： 毫秒  需要执行的方法
  function console1() {
      console.log(111);
      if(timer){
          clearTimeout(timer);
      }
      timer = setTimeout(function(){
          console1();
      }, 3000);
  }
  console1()

  [関連する推奨事項: JavaScript ビデオ チュートリアル 、

  Web フロントエンド ]

  以上がES6でタイマーをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。