ホームページ > 記事 > ウェブフロントエンド > JavaScript_javascript スキルにおけるタイマー項目 23 の合理的な使用

JavaScript_javascript スキルにおけるタイマー項目 23 の合理的な使用

WBOYオリジナル: 2016-05-16 15:34:151047ブラウズ

JavaScript には、タイマー専用の関数が 2 つあります。

1. カウントダウンタイマー: timename=setTimeout("function();",laytime); 2. ループタイマー: timename=setInterval("function();",laytime);

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 つのボタンとテキストボックスが含まれます。スタートボタンをクリックすると計測が開始され、最小単位は0.01秒です。再度ボタンをクリックすると計測が停止し、テキストボックスに経過時間が表示されます。別のボタンを使用して、現在時刻をゼロにリセットします。実装コードは次のとおりです:

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
  <form action="somepage.asp"> 
    <input type="text" value="0" name="txt1"/> 
    <input type="button" value="开始" name="btnStart"/> 
    <input type="button" value="重置" name="btnReset"/> 
  </form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取表单中的表单域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定义定时器的id 
var id; 
//每10毫秒该值增加1 
var seed=0; 
btnStart.onclick=function(){ 
   //根据按钮文本来判断当前操作 
   if(this.value=="开始"){ 
       //使按钮文本变为停止 
       this.value="停止"; 
       //使重置按钮不可用 
       btnReset.disabled=true; 
       //设置定时器，每0.01s跳一次 
       id=window.setInterval(tip,10); 
   }else{ 
       //使按钮文本变为开始 
       this.value="开始"; 
       //使重置按钮可用 
       btnReset.disabled=false; 
       //取消定时 
       window.clearInterval(id); 
   } 
} 
//重置按钮 
btnReset.onclick=function(){ 
   seed=0; 
} 
//让秒表跳一格 
function tip(){ 
   seed++; 
   txt.value=seed/100; 
} 
//--> 
</script>

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 は変数を表します。ただし、この書き方は十分直感的ではないため、場合によっては関数名を使用する必要があります。パラメーターを使用して関数を呼び出すには、次のようなちょっとしたトリックがあります。

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

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

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

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

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

初学者可能对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事伯处理的进程时间线请看下图：

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：「JavaScript 高度なプログラミング」学習ノートオブジェクトと配列の参照タイプ_JavaScript スキル次の記事：「JavaScript 高度なプログラミング」学習ノートオブジェクトと配列の参照タイプ_JavaScript スキル

続きを見る

JavaScript_javascript スキルにおけるタイマー項目 23 の合理的な使用

関連記事