ホームページ > ウェブフロントエンド > フロントエンドQ&A > タイマーを終了するJavaScriptメソッド

タイマーを終了するJavaScriptメソッド

王林
リリース: 2023-05-27 09:35:37
オリジナル
7516 人が閲覧しました

タイマー操作に JavaScript を使用する場合、一定時間が経過した後に特定のコード セグメントの実行を停止する必要がある場合があります。そのためにはタイマーを使用して操作を終了する必要があります。 JavaScript ではタイマーを終了する方法がたくさんありますが、ここでは一般的な方法をいくつか紹介します。

方法 1:clearTimeout()

単一の実行タイマーを終了するには、setTimeout() メソッドを使用できます。タイマーを終了する必要がある場合は、clearTimeout() メソッドを使用できます。たとえば、次のコードは 5 秒後にメッセージを出力します。

var timer = setTimeout(function() {
    console.log('任务完成!');
}, 5000);
ログイン後にコピー

このコード スニペットでは、setTimeout() がパラメータとして 5 秒を指定して匿名関数を呼び出します。この関数は 5 秒後に 1 回実行されます。このタイマーの変数 timer を作成し、それを使用して clearTimeout() メソッドを呼び出してタイマーを終了できます。例:

clearTimeout(timer);
ログイン後にコピー

このメソッドの効果は、タイマーを終了し、タイマーが匿名関数の実行を継続しないようにすることです。

方法 2: clearInterval()

時々実行されるタイマーを終了する必要がある場合は、setInterval() メソッドを使用できます。タイマーを終了する必要がある場合は、clearInterval() メソッドを使用できます。

たとえば、次のコードは 2 秒ごとにメッセージを出力します:

var interval = setInterval(function() {
    console.log('任务完成!');
}, 2000);
ログイン後にコピー

同様に、このタイマーの変数 interval を作成し、それを使用して呼び出しを行うことができます。タイマーを終了するには、clearInterval() メソッドを使用します。例:

clearInterval(interval);
ログイン後にコピー

このメソッドの効果は、定期的に実行される関数のタイマーを終了することです。

方法 3: 変数と組み合わせてタイマーを制御する

場合によっては、より柔軟な終了タイマー操作が必要になる場合があります。したがって、変数を組み合わせてタイマーの動作を制御できます。たとえば、次のコードは 2 秒ごとにメッセージを出力しますが、出力されるのは 3 回だけです:

var counter = 0;
var interval = setInterval(function() {
    counter++;
    console.log('任务完成!');
    if(counter == 3) {
        clearInterval(interval);
    }
}, 2000);
ログイン後にコピー

この例では、変数 counter を使用して、カウンターが 3 に達したときにカウントします。このタイマーを終了するには、clearInterval() を呼び出します。

結論

上記はタイマーを終了する一般的な方法です。各方法の使用シナリオは若干異なります。 1 回実行するタイマーを終了する必要がある場合は、clearTimeout() メソッドを使用します。時々実行するタイマーを終了する必要がある場合は、clearInterval() メソッドを使用します。より柔軟な終了タイマー操作が必要な場合は、可変制御タイマーを組み合わせることで実現できます。現実の状況に応じて適切な方法を選択する必要があります。

以上がタイマーを終了するJavaScriptメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート