JavaScript settimeoutの使用法

JavaScript の

setTimeout() は、一定時間後に特定のコードを実行できるようにする非常に便利な関数です。このメソッドは、実行するコードとミリ秒単位の時間という 2 つのパラメーターを受け取ります。指定された時間が経過すると、実行されたコードが呼び出されます。

setTimeout() メソッドは、遅延効果を作成したり、特定の時間後に特定の操作を実行したりするためによく使用されます。指定した時間の経過後に、単純な警告ウィンドウやポップアップ メッセージから複雑な機能や操作の実行まで、あらゆる JavaScript コードを実行できます。

ここで、setTimeout の使用法について詳しく学びます。

遅延実行コード

遅延実行コードは、setTimeout の最も基本的な使用法の 1 つです。以下は基本的な例です:

setTimeout(function(){
    alert("Hello World!");
}, 3000);

上記のコードは、ユーザーが 3 秒待った後に「Hello World!」メッセージ ボックスをポップアップ表示します。

コードでは、関数を直接呼び出すのではなくコードを実行する必要があるため、最初のパラメーターは匿名関数です。 2 番目のパラメータは遅延時間を指定します。ここではミリ秒です。この例では、期間として 3 秒 (3000 ミリ秒) を指定します。

DOM 要素の操作

setTimeout() を使用して DOM 要素を操作することもできます。たとえば、次のコードは、一定期間後にページ タイトル要素の内容を変更します。

let pageTitle = document.getElementById("page-title");
setTimeout(function(){
    pageTitle.textContent = "New Page Title";
}, 5000);

この例では、まず ID が「page-title」のページ要素を取得し、保存します。変数に入れます。次に、setTimeout() を使用して要素の textContent プロパティを変更し、ページ タイトルを「新しいページ タイトル」に変更しました。この例では、5 秒の遅延を使用しました。

setTimeout()のキャンセル

場合によっては、タイマーが完了する前にsetTimeout()関数の実行をキャンセルする必要があるかもしれません。タイマーをキャンセルするには、clearTimeout() 関数を使用できます。たとえば、次のコードは、最初の引数として setTimeout() 関数の呼び出しでタイマーを作成します。 5 秒後にユーザーが要素をクリックすると、タイマーはキャンセルされます。

let timer = setTimeout(function(){
    alert("You've waited too long!");
}, 5000);

document.getElementById("some-element").addEventListener("click", function(){
    clearTimeout(timer);
});

この例では、最初にタイマーの ID 番号を保存し、後で clearTimeout() 関数を使用してタイマーをキャンセルできるようにします。次に、addEventListener() 関数を使用して、ユーザーがページ上の要素をクリックしたときにタイマーをクリアするコードを関連付けます。このアプローチを使用すると、特定の条件に達したときに遅延操作をキャンセルできます。

結論

setTimeout() は、遅延後にコードを実行するための非常に便利な関数です。これは、アラート ウィンドウの表示、DOM 要素の操作、遅延効果の追加、複雑な機能の実行など、さまざまな目的に使用できます。どのような場合でも、clearTimeout() 関数を使用してタイマーをキャンセルし、操作の実行を防ぐことができます。

以上がJavaScript settimeoutの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。