JavaScript タイミングイベント

JavaScript を使用すると、関数が呼び出された直後ではなく、設定された時間間隔の後にコードを実行できます。これをタイミングイベントと呼びます。

JavaScript でタイミングイベントを使用するのは非常に簡単です。主なメソッドは次の 2 つです:

setInterval() - 指定されたコードを指定されたミリ秒間継続的に実行します。

setTimeout() - 指定されたミリ秒間一時停止した後、指定されたコードを実行します

注: setInterval() と setTimeout() は、HTML DOM Window オブジェクトの 2 つのメソッドです。

setInterval()メソッド

setInterval()メソッドは、指定されたコードを指定されたミリ秒間連続して実行します

Syntax

window.setInterval("javascript function",milliseconds);

window.setInterval()メソッドが使用可能なしウィンドウ接頭辞を使用し、関数 setInterval() を直接使用します。

setInterval() 最初のパラメータは関数です。

2 番目のパラメータ間のミリ秒数

注: 1000 ミリ秒は 1 秒です。

「hello」が 3 秒ごとに表示されます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

実行を停止するには?

clearInterval() メソッドは、setInterval() メソッドの実行を停止するために使用されます。

構文

window.clearInterval(intervalVariable)

window.clearInterval()メソッドは、ウィンドウプレフィックスを使用せずに関数clearInterval()を直接使用できます。

clearInterval() メソッドを使用するには、タイミングメソッドの作成時にグローバル変数を使用する必要があります:

myVar=setInterval("javascript function",milliseconds);

その後、clearInterval() メソッドを使用して実行を停止できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
  <p id="clock_show"></p>
  <button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>

setTimeout()メソッド

Syntax

window.setTimeout("javascript function", ミリ秒);

setTimeout()メソッドは特定の値を返します。上記のステートメントでは、値は t という名前の変数に格納されます。このsetTimeout()をキャンセルしたい場合は、この変数名で指定できます。

setTimeout() の最初のパラメータは、JavaScript ステートメントを含む文字列です。このステートメントは、「alert('5 秒!')」のようなもの、または、alertMsg() などの関数の呼び出しである可能性があります。

2 番目のパラメーターは、最初のパラメーターが現在時刻から何ミリ秒後に実行されるかを示します。

ヒント: 1000 ミリ秒は 1 秒に相当します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

実行を停止するには?

setTimeout() メソッドの関数コードを停止するには、

window.clearTimeout(timeoutVariable) を使用します。 )

window.clearTimeout() メソッドウィンドウプレフィックスは使用できません。

clearTimeout() メソッドを使用するには、作成タイムアウトメソッド (setTimeout) でグローバル変数を使用する必要があります:

myVar=setTimeout("javascript function",milliseconds);

関数が実行されていない場合は、clearTimeout() メソッドを使用して関数コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
    var s = 0;
    var n = 0;
    var t;
    function timeCount()
    {
    document.getElementById('second_show').value = s;
    n = n+1;
    s = n/10;
    t = setTimeout("timeCount()",100);
    }
</script>
</head>
<body>
  <form>
    <input type="button" value="开始计时" onClick="timeCount()">
    <input type="text" id="second_show">
    <input type="button" value="结束计时" onClick="clearTimeout(t)">
  </form>
</body>
</html>

の実行を停止できます。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var s = 0; var n = 0; var t; function timeCount() { document.getElementById('second_show').value = s; n = n+1; s = n/10; t = setTimeout("timeCount()",100); } </script> </head> <body> <form> <input type="button" value="开始计时" onClick="timeCount()"> <input type="text" id="second_show"> <input type="button" value="结束计时" onClick="clearTimeout(t)"> </form> </body> </html>

提出するリセットコード

自動運転