setTimeoutメソッドの使い方-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

setTimeoutメソッドの使い方

不言

Jan 30, 2019 pm 04:26 PM

settimeout

setTimeout() メソッドは、ミリ秒単位で指定された時間が経過した後に関数を呼び出します。 setTimeout メソッドには、コールバック関数への参照とミリ秒単位の遅延という 2 つのパラメータが必要です。この記事では、setTimeout について説明します。具体的な使い方。

setTimeoutメソッドの使い方

まず setTimeout の基本構文を見てみましょう

setTimeout(function, milliseconds, param_one, param_two, ...)

ログイン後にコピー

setTimeout を停止して関数の実行を防ぐには、clearTimeout() を使用する必要があります。方法。

setTimeout() メソッドは、clearTimeout() メソッドで使用できる ID を返します。

簡単な例を見てみましょう

コードは次のとおりです

<!DOCTYPE html>
<html>
<body>

<script>
  var sampleVar;
  function sampleFunction(){    
    sampleVar = setTimeout(alertFunc, 2000);
  }
  function alertFunc(){    
    alert("Two seconds have passed!");
  }
  sampleFunction();
</script>

</body>
</html>

ログイン後にコピー

上記のコードは 2 秒後にポップアップウィンドウを開きます。

例 2

この例では、要素のテキストを 2 秒ごと (3 回) 変更します。これを行うには、一部の HTML 要素の ID を「counter」に設定する必要があります。

コードは次のとおりです

<!DOCTYPE html>
<html>
<body>

<p>单击下面的按钮。输入字段将显示经过2、4和6秒。</p>

<button onclick="timedText()">Display timed text</button>

<input type="text" id="text">

<script>
function timedText() {
    var x = document.getElementById("text");
    setTimeout(function(){ x.value="2 seconds" }, 2000);
    setTimeout(function(){ x.value="4 seconds" }, 4000);
    setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>

</body>
</html>

ログイン後にコピー

ブラウザ上の表示効果は次のとおりです

setTimeoutメソッドの使い方

左のボタンをクリックすると、テキストボックスにプロセスが表示されます。 2、4、6 秒

このサンプルは、タイマーが切れる前に「samplestopfunction」が呼び出されると、「タイムアウト」を停止します。

コードは次のとおりです

<!DOCTYPE html>
<html>
<body>

<p>等待3秒钟后，单击第一个按钮显示“Hi”。</p>
<p>单击第二个按钮以阻止执行第一个函数<br>（必须在3秒钟前单击它）</p>

<button onclick="sampleFunction()">Try it</button>
<button onclick="sampleStopFunction()">Stop the alert</button>

<script>
var sampleVar;

function sampleFunction() {
 sampleVar = setTimeout(function(){ alert("Hi") }, 2000);
}

function sampleStopFunction() {
 clearTimeout(sampleVar);
}
</script>

</body>
</html>

ログイン後にコピー

ブラウザでの表示効果は次のとおりです

setTimeoutメソッドの使い方

この記事はここで終了です。さらに興味深い内容ですPHP 中国語 Web サイトにある関連するコラムのチュートリアルに注目してください。！！

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します