JavaScript で setTimeout() を使用してタイマーを設定する方法-jsチュートリアル-php.cn

JavaScript で setTimeout() を使用してタイマーを設定する方法

青灯夜游

リリース： 2018-12-10 14:33:08

オリジナル

8091 人が閲覧しました

JavaScriptでは、setTimeout()メソッドに呼び出す関数または実行するコード文字列パラメータと遅延時間パラメータを設定することで、setTimeout()メソッドを呼び出すことで簡易タイマーを設定できます。

JavaScript で setTimeout() を使用してタイマーを設定する方法

JS では、設定された時間間隔の後に特定のコードを実行するためのネイティブメソッドがいくつか提供されています。setTimeout() メソッドは 1 回限りのタイマーを設定し、トリガーされます。指定された遅延時間の後に 1 回だけ。 setTimeout() メソッドがタイマーを設定する方法を見てみましょう。

setTimeout() メソッド

setTimeout(): ワンタイムタイマーを設定し、指定された回数が経過した後に関数または計算式を呼び出します。ミリ秒 ; ロード中に指定された時間だけ遅延させた後、式を 1 回だけ実行します。 [関連ビデオチュートリアルの推奨事項: JavaScript チュートリアル]

構文:

setInterval(code,millisec,lang);

ログイン後にコピー

パラメーターの説明:

code: 必須パラメーター。必要な関数を示します。呼び出されるか、実行されるコードの文字列。

millisec: 定期的な実行または「コードパラメータ」の呼び出し前の時間間隔を示す必須パラメータで、ミリ秒 (1s=1000ms) 単位で測定されます。

lang オプションのパラメータ。

setTimeout() メソッドの例:

html コード:

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

ログイン後にコピー

js コード:

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

ログイン後にコピー

レンダリング：

JavaScript で setTimeout() を使用してタイマーを設定する方法

#setTimeout() は無限ループタイマーを設定します

setTimeout() メソッドを使用することもできます無限ループタイマーを実装するには、それ自体を呼び出す関数を作成する必要があります。このとき、setTimeout() メソッドは無限ループします。タイマーを停止したい場合は、clearTimeout() メソッドを使用する必要があります。

clearTimeout() メソッド

clearTimeout(): setTimeout() によって設定されたタイマーをキャンセルするために使用され、無限ループに setTimeout() を設定するときに使用されます。

構文:

clearTimeout(id_of_setTimeout);

ログイン後にコピー

パラメータの説明:

id_of_setTimeout: setTimeout() によって返される ID 値を表します。

注: この値は、キャンセルされる遅延呼び出し関数または遅延実行コード文字列を識別します。

setTimeout() メソッドと clearTimeout() メソッドの組み合わせの例

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById(&#39;txt&#39;).value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

ログイン後にコピー

レンダリング:

JavaScript で setTimeout() を使用してタイマーを設定する方法