javascript settimeoutキャンセル

JavaScript は、Web アプリケーションでインタラクティブな要素とロジックを作成するために使用できる人気のあるプログラミング言語です。このうち、setimeout は JavaScript の組み込み関数で、指定されたコードを一定の遅延後に実行できます。ただし、実行中に setTimeout タイマーをキャンセルする必要がある場合があります。この記事では、JavaScript言語を使用してsetTimeoutタイマーをキャンセルする方法を紹介します。

1. setTimeout 関数の基本概要

setTimeout のキャンセル方法を紹介する前に、まず setTimeout 関数の基本的な使い方と概念を理解しましょう。

setTimeout 関数は JavaScript のグローバル関数であり、その機能は、指定されたコードの実行を一定時間後に遅らせることです。具体的な使い方は以下の通りです。

setTimeout(function(){
  //执行的代码
},延迟的毫秒数)

このうち、functionは遅延させる関数を表し、遅延ミリ秒数は遅延させる時間をミリ秒単位で示す数値型パラメータです。たとえば、500 ミリ秒後に関数を実行したい場合は、次のコードを使用できます:

setTimeout(function(){
  console.log('延迟500毫秒后执行的代码。')
},500)

2.clearTimeout 関数を使用して setTimeout タイマーをキャンセルする方法

遅延時間setTimeout 関数が長すぎるか、疑わしい場合は、実行中にタイマーをキャンセルする必要があるかもしれません。このとき、windowオブジェクトのclearTimeout関数を利用することができます。この関数は、まだ実行されていない setTimeout 関数の一時停止をキャンセルすることができます。

clearTimeout 関数は次のように使用されます。

var timer = setTimeout(function(){
  console.log('延迟执行的代码。')
},3000)

//取消计时器
clearTimeout(timer);

上記のコード例では、timer という名前の変数が last1 タイマーを保存するように定義され、clearTimeout 関数を使用してタイマーがキャンセルされます。 。このようにして、コードを実行する前に遅延をキャンセルする必要がある場合は、clearTimeout 関数を使用できます。

3. setTimeout のタイマーはキャンセルできますが、内部コードは停止できません

タイマーは clearTimeout 関数を通じてキャンセルできますが、コードは内部で実行されることに注意してください。タイマーは停止できません。つまり、setTimeout 関数内で常に実行される関数を定義すると、タイマーがキャンセルされても、関数は完了するまで実行され続けます。

たとえば、以下のコード例では1秒に1回実行するsetInterval関数を定義していますが、タイマーをキャンセルしても1回の実行で関数は停止します。

var timer = setTimeout(function(){
  setInterval(function(){
    console.log('每秒执行一次的代码。')
  },1000)
},5000)

//取消计时器
clearTimeout(timer)

4. setTimeout と clearTimeout の実践的な応用

次に、setTimeout と clearTimeout の実践的な応用を見てみましょう。

実際のアプリケーションでは、setTimeout 関数と clearTimeout 関数は通常、コードの実行の遅延、ポーリングが必要なコード、およびユーザーへのフィードバックの提供が必要なシナリオで使用されます。例:

1. 遅延実行コード

実行前に一定時間待機する必要がある一部のシナリオでは、次のように setTimeout 関数を使用してこれを実現できます。ユーザー入力後に検索が自動的に完了する ヒント:

var timer;
function handleChange(){
  clearTimeout(timer)
  timer = setTimeout(function(){
    console.log('自动完成搜索提示')
  },500)
}

2. ポーリング コード

リアルタイム更新が必要な一部のシナリオでは、setInterval 関数を使用してポーリングを実装できます。 。たとえば、サーバーからのデータを時々更新します。

var timer = setInterval(function(){
  console.log('从服务器轮询数据')
},5000)

//取消轮询
clearInterval(timer)

3. フィードバック コード

ユーザーにフィードバックを提供する必要がある一部のシナリオでは、setTimeout 関数を使用します。に使える。 。たとえば、カウントダウン、待機後に特定の操作を実行するなど:

var count = 10;
var timer = setInterval(function(){
  count--
  console.log('还有' + count + '秒...')
  if(count == 0){
    clearInterval(timer)
    console.log('倒计时结束')
  }
},1000)

まとめると、setTimeout 関数と clearTimeout 関数は非常に単純ですが、実際のアプリケーションでは大きな役割を果たし、Web ページを作成します。より機能的に、より使いやすく、よりフレンドリーに。

以上がjavascript settimeoutキャンセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。