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> 

ここでは、パラメータを受け取り、パラメータなしで関数を返す関数 _hello が定義されており、外部関数のパラメータはこの関数内で使用されるため、パラメータを使用せずに呼び出すことができます。 window.setTimeout 関数では、_hello(userName) を使用してパラメータなしで関数ハンドルを返すことで、パラメータを渡す関数を実現します。

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

まずコードを見てみましょう

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

代码先输出哪个？答案在程序中很明显。为什么呢？

初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。

下面说下Javascript线程，下图表示javascript进程时间线。

除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。

定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

请看以下代码：

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

对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：

以上就是本文的全部内容，希望通过这篇文章大家更加了解javascript的定时器，大家共同进步。