JavaScript タイミング イベント
JavaScript を使用すると、関数が呼び出された直後ではなく、設定された時間間隔の後にコードを実行できます。これをタイミング イベントと呼びます。
JavaScript でタイミング イベントを使用するのは非常に簡単です。主なメソッドは次の 2 つです:
setInterval() - 指定されたコードを指定されたミリ秒数で継続的に実行します。
setTimeout() - 指定されたミリ秒間一時停止した後、指定されたコードを実行します
注: setInterval() と setTimeout() は、HTML DOM Window オブジェクトの 2 つのメソッドです。
setInterval()メソッド
setInterval()は、指定されたコードを指定されたミリ秒間連続して実行します
Syntax
window.setInterval()メソッドは、ウィンドウプレフィックスを使用せずに関数setInterval()を直接使用できます。
setInterval() 最初のパラメータは関数です。
2 番目のパラメータ間のミリ秒数
注: 1000 ミリ秒は 1 秒です。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
インスタンスは setInterval() メソッドの使用方法を示していますが、3 秒ごとにポップアップ表示されるわけではありませんユーザーエクスペリエンスにとっては良いことです。
次の例では、現在の時刻が表示されます。 setInterval() メソッドは、時計と同じように、コードが毎秒実行されるように設定します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
実行を停止するには
clearInterval() メソッドを使用して関数コードを停止します。 setInterval() メソッドの実行。
文法
window.clearInterval()メソッドは、ウィンドウプレフィックスと関数clearInterval()なしで直接使用できます。
clearInterval() メソッドを使用するには、タイミング メソッドの作成時にグローバル変数を使用する必要があります:
その後、clearInterval() メソッドを使用して実行を停止できます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
setTimeout() メソッド
構文
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>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしてください
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>。その他の例
別の簡単なタイミング<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 seconds"},2000);
var t2=setTimeout(function(){x.value="4 seconds"},4000);
var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html> 
