1. 1 回だけ実行されるタイマー
次のようにコードをコピーします。
<スクリプト>
//タイマーは非同期で実行されます
関数 hello(){
アラート("こんにちは");
}
//メソッド名を使用してメソッドを実行します
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//文字列実行メソッドを使用
window.clearTimeout(t1);//タイマーを削除します
</script>
2. 繰り返し実行タイマー
次のようにコードをコピーします。
<スクリプト>
関数 hello(){
アラート("こんにちは");
}
// メソッドを繰り返します
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//タイマーを削除する方法
window.clearInterval(t1);
</script>
述べる：
ページに 2 つのメソッドがあり、どちらもページが読み込まれた後に実行されますが、実際には順番に実行できない場合は、次のメソッドを参照して問題を解決できます。
onload メソッドにタイマーを追加し、タイマーを設定して、実行する前に一定期間「遅延」させることができます。これは、ページの読み込みとメソッドの実行の順序を区別するためと考えられます。
JavaScript には、タイマー専用の関数が 2 つあります。
1. カウントダウンタイマー: timename=setTimeout("function();",laytime);
2. ループ タイマー: timename=setInterval("function();",laytime);
最初のパラメータ「function()」は、タイマーがトリガーされたときに実行されるアクションです。1 つまたは複数の関数を「;」で区切ることができます。たとえば、2 つの警告ウィンドウをポップアップ表示したい場合は、「function();」を次のように置き換えます。
"alert('最初の警告ウィンドウ!');alert('2 番目の警告ウィンドウ!');"; そして 2 番目のパラメーター "laytime" はミリ秒単位の間隔時間です。つまり、"5000" と入力すると 5 秒を意味します。
カウントダウン タイマーは指定した時間に達した後にイベントをトリガーしますが、ループ タイマーはインターバル時間に達するとイベントを繰り返しトリガーします。両者の違いは、前者は 1 回だけ動作するのに対し、後者は継続的に動作することです。
たとえば、ページを開いた後、数秒ごとに自動的に別のページにジャンプしたい場合は、カウントダウンタイマー「setTimeout("function();",laytime)」を使用する必要があり、特定の文章を設定したい場合は、次々と現れて、
ループタイマー「setInterval("function();",laytime)」を使用する必要があります。
フォームのフォーカスを取得するには、document.activeElement.id が使用されます。 if を使用して、document.activeElement.id とフォームの ID が同じかどうかを判断します。
例: if ("mid" == document.activeElement.id) {alert();}、「mid」はフォームに対応する ID です。
タイマー：
特定の時間の後に実行されるプログラムを指定するために使用されます。
JSでの実行タイミングとsetTimeoutとsetIntervalの違いとキャンセル方法
setTimeout(Expression,DelayTime) は、DelayTime の後に、操作を実行する前に一定期間遅延するために Expression が実行されます。
setTimeout("function",time) はタイムアウト オブジェクトを設定します
setInterval(expression,layTime)、各 DelayTime は Expression を実行します。これは多くの場合、Expression を更新するために使用されます。
setInterval("function",time) はタイムアウト オブジェクトを設定します
SetInterval は自動的に繰り返されますが、setTimeout は繰り返されません。
clearTimeout(object) は、設定された setTimeout オブジェクトをクリアします
clearInterval(object) は setInterval オブジェクトをクリアします
例を 2 つだけ挙げてみましょう。
例 1. フォームがトリガーまたはロードされると、文字列をそのまま出力します。
次のようにコードをコピーします。
<html>
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無題のドキュメント</title>
<script language="JavaScript" type="text/javascript">
var str = "これはテスト用のサンプルテキストです";
var seq = 0;
var Second=1000; //インターバル時間 1 秒
関数scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
シーケンス++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="word"></div><br/><br/>
</body>
</html>
例 2. 入力ボックスにフォーカスがある場合は、定期的に入力ボックスの情報を確認し、フォーカスが当たっていないときは確認動作を行わない。
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無題のドキュメント</title>
<script language="JavaScript" type="text/javascript">
var Second=5000; //インターバル時間 5 秒
var c=0;
関数scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="スケジュールされたチェック<b> "+c+" </b>時間<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="入力ボックスの現在の内容は<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<本文>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/ >
<div id="word"></div><br/><br/>
</body>
</html>
例 3. 以下は、タイマーが期限切れになった後に警告ウィンドウが表示される最も単純な例です。
次のようにコードをコピーします。
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<スクリプト言語="javascript">
関数 count() {
document.getElementByIdx_x_x('m').innerHTML="タイマーが開始されました!";
setTimeout("alert('10 秒前!')",10000)
}
</script>
<本文>
<div id="m"></div>
<input TYPE="button" value="タイマー開始" onclick="count()">
</body>
</html>
例 4: カウントダウン タイム ジャンプ
次のようにコードをコピーします。
<html>
<頭>
<base href="<%=basePath%>">
<title>私の JSP 'ds04.jsp' の開始ページ</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a> 数秒後に自動的にジャンプします...
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
<!--スクリプトの開始-->
<script language="javascript" type="">
関数 countDown(秒){
tiao.innerText=秒;
if(--秒>0)
setTimeout("countDown("+秒+")",1000);
}
カウントダウン(3);
</script>
<!--スクリプトの終わり-->
</head>
例 6:
次のようにコードをコピーします。
<頭>
<meta http-equiv="refresh" content="2;url='b.html'">
</head>
例 7:
次のようにコードをコピーします。
<script language="javascript" type="text/javascript">
setTimeout("window.location.href='b.html'", 2000);
//以下の2つは両方とも使えます
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</script>
例 8:
次のようにコードをコピーします。
<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
var Second = document.getElementByIdx_x('totalSecond').innerHTML;
if(isNaN(秒)){
//...数値処理メソッドではありません
}それ以外{
setInterval(関数(){
document.getElementByIdx_x('totalSecond').innerHTML = --秒;
if (秒 <= 0) {
window.location = 'b.html';
}
}, 1000);
}
</script>