me_javascript スキルから JavaScript タイマーを学ぶ

1. タイマーの概要

ウィンドウ オブジェクトには、タイマー効果を実装する 2 つのメソッド、window.setTimeout() と window.setInterval が用意されています。前者は指定された時間の後にコードを実行できますが、後者は指定された時間ごとにコードを 1 回実行できます。そのプロトタイプは次のとおりです:

window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds); 

このうち、expression には引用符で囲まれたコードを指定することも、関数名を呼び出しハンドルとして使用すると、システムが自動的にその関数を呼び出すこともできます。パラメータを含めることはできません。文字列を使用する場合は、その中に渡すパラメータを記述することができます。 2 つのメソッドの 2 番目のパラメーターはミリ秒で、遅延または繰り返し実行のミリ秒数を表します。以下に 2 つの方法を紹介します。

SetInterval の使用は、遅延関数 setTimeout の設定と非常に似ています。 setTimeout は、操作を実行する前に一定期間遅延させるために使用されます。

• setTimeout("function",time) はタイムアウト オブジェクトを設定します
• setInterval("function",time) はタイムアウト オブジェクトを設定します

setInterval は自動的に繰り返され、setTimeout は繰り返されません。

• clearTimeout(object) は、設定された setTimeout オブジェクトをクリアします
• clearInterval(object) は setInterval オブジェクトをクリアします

タイマーを使用して、JavaScript の遅延実行または繰り返し実行を実装します。

2. 具体的な使用方法

1． window.setTimeout メソッド

このメソッドは関数の実行を遅らせることができます。例:

function hello(){ 
 alert("hello"); 
} 
window.setTimeout(hello,5000); 

このコードにより、ページを開いてから 5 秒後にダイアログ ボックス「hello」が表示されます。最後の文は次のように書くこともできます:

window.setTimeout("hello()",5000); 

読者はそれらの違いを理解できるでしょう。このプロパティは window.setInterval メソッドにも存在します。

遅延期間に達する前に遅延実行をキャンセルする場合は、タイマーを表す ID を受け取る window.clearTimeout(timeoutId) メソッドを使用できます。この ID は、setTimeout メソッドによって返されます。例:

function hello(){ 
 alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
 window.clearTimeout(id); 
} 

このように、表示をキャンセルしたい場合は、ページの任意の部分をクリックするだけで、window.clearTimeoutメソッドが実行され、タイムアウト操作がキャンセルされます。

2. window.setInterval メソッド

このメソッドでは、一定時間ごとに関数が呼び出されます。これは非常に一般的なメソッドです。スケジュールされた実行をキャンセルする場合は、clearTimeout メソッドと同様に、window.clearInterval メソッドを呼び出すことができます。また、clearInterval メソッドは、setInterval メソッドによって返された値をパラメータとして受け取ります。例:

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id); 

3. チャレンジ

上記のコードは、スケジュールされた実行をキャンセルする方法を説明するためにのみ使用されます。実際、setInterval メソッドは多くの場合に使用する必要があります。 ストップウォッチの設計 では、setInterval 関数 の目的を紹介します。 : このストップウォッチには、時間を表示するための 2 つのボタンとテキスト ボックスが含まれます。開始ボタンをクリックすると、最小単位で計測が開始され、テキスト ボックスに経過時間が表示されます。時刻とその他のボタン 現在時刻をゼロにクリアするために使用します。 まずは実践してみましょう。次の記事で答えがわかります。《JavaScript でシンプルなストップウォッチ タイマーを設計する》

3. タイマー呼び出しにパラメーターを渡します

window.setTimeout であっても window.setInterval であっても、関数名を呼び出しハンドルとして使用する場合はパラメータを取得できないことが多く、解決策が必要です。たとえば、関数 hello(_name) は、ユーザー名

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
 alert("hello,"+_name); 
} 

現時点では、次のステートメントを使用して hello 関数の実行を 3 秒遅らせることは現実的ではありません:

window.setTimeout(hello(userName),3000); 

これにより、hello 関数が即座に実行され、戻り値が呼び出しハンドルとして setTimeout 関数に渡されますが、その結果はプログラムが必要とするものではありません。文字列形式を使用すると、目的の結果を得ることができます:

window.setTimeout("hello(userName)",3000); 

ここでの文字列は JavaScript コードの一部であり、userName は変数を表します。ただし、この書き方は十分直感的ではないため、場合によっては関数名を使用する必要があります。パラメーターを使用して関数を呼び出すには、次のようなちょっとしたトリックがあります。

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
 alert("hello,"+_name); 
} 
//创建一个函数，用于返回一个无参数函数 
function _hello(_name){ 
 return function(){ 
 hello(_name); 
 } 
} 
window.setTimeout(_hello(userName),3000); 
</script> 

4. タイマーの「タイミング」機能を正しく理解する

function display(){
 alert(hello);
}
setTimeout("display()", 3000);
alert("你首先看到的是我！")

var btn = document.getElementById("mybtn");
 btn.onclick = function () {
 setTimeout(function () {
 document.getElementById("message").nodeName = "mymessage";
 //其它代码
 }, 250);
 }