set Timeoutとset Intervalの使用

2615 ワード

この2つの方法はいずれも、一定の期間の後にJavaScriptを実行するために使用することができる.しかし、二つはそれぞれの応用シーンがあります.
 方法
実は、setTimeoutとsetIntervalの文法は同じです.二つのパラメータがあります.一つは実行するコード文字列です.もう一つはミリ秒単位の時間間隔です.その時間帯が過ぎるとそのコードが実行されます.
しかし、この二つの関数には違いがあります.setIntervalは一回のコードを実行した後、その固定された時間間隔を経て、自動的にコードを繰り返し実行します.setTimeoutは一回のコードしか実行しません.
表面的にはsetTimeoutはオンオフ方式の動作にしか適用できないように見えるが、setTimeoutを作成することにより、繰り返し動作を実現するために、関数を繰り返してsetTimeoutを呼び出すことができる.
showTime();

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

    setTimeout("showTime()", 5000);

}
      この関数を呼び出すと、5秒ごとに時間が表示されます.setIntervalを使用すると、対応するコードは以下の通りです.
setInterval("showTime()", 5000);

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

}
 
この2つの方法は非常に似ているように見えるかもしれません.また、表示の結果も似ていますが、両者の最大の違いは、setTimeout方法は5秒ごとにショーTime関数を実行しないことです.setTimeoutを呼び出した後、5秒後にショーTime関数を実行します.これは、showTime関数の本体部分が2秒で実行されると、関数全体が7秒ごとに実行されることを意味する.set Intervalは自分の呼び出された関数に縛られていません.それは単に一定の時間ごとにその関数を繰り返し実行します.
一定の時間間隔ごとにある動作を正確に実行する必要があるなら、setIntervalを使用したほうがいいです.連続通話による干渉の問題が発生したくないなら、特に毎回の関数の呼び出しには重い計算と長い処理時間が必要です.setTimeoutを使用したほうがいいです.
 
討論する
タイミング関数を処理しないと、setIntervalは同じコードを実行し続け、ブラウザウィンドウが閉まるか、ユーザーが別のページに移るまで継続します.しかし、setTimeoutとset Interval関数の実行を終了する方法がある.
setIntervalが実行を起動したら、timer IDを返します.将来、この値を利用してタイマにアクセスできます.このIDをclear Intervalに渡すと、呼び出されたプロセスコードの実行を終了します.具体的には、以下のようになります.
var intervalProcess = setInterval("alert('GOAL!')", 3000);

var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);

function stopGoal()

{

    clearInterval(intervalProcess);

}
 
stop Goallinkをクリックしたら、いつクリックしてもinterval Processはキャンセルされます.これからはinterval Processを繰り返し実行しません.タイムアウト時間内にsetTimeoutをキャンセルすると、このような終了効果はsetTimeoutにおいても達成され、具体的には以下のように実現される.
 
var timeoutProcess = setTimeout("alert('GOAL!')", 3000);

var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);

function stopGoal()
{
   clearTimeout(timeoutProcess);
}
自動回転http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html