ホームページ > 記事 > ウェブフロントエンド > setTimeoutメソッドの使い方
setTimeoutメソッドの使い方
- 不言オリジナル
- 2019-01-30 16:26:2122857ブラウズ
setTimeout() メソッドは、ミリ秒単位で指定された時間が経過した後に関数を呼び出します。 setTimeout メソッドには、コールバック関数への参照とミリ秒単位の遅延という 2 つのパラメータが必要です。この記事では、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>ブラウザ上の表示効果は次のとおりです
左のボタンをクリックすると、テキスト ボックスにプロセスが表示されます。 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>ブラウザでの表示効果は次のとおりです
この記事はここで終了です。さらに興味深い内容ですPHP 中国語 Web サイトにある関連するコラムのチュートリアルに注目してください。 ！ ！
以上がsetTimeoutメソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。