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> の実行を停止できます。次のセクション
