settimeoutとsetIntervalのブラウザ互換性分析

3900 ワード

AJAXRequestブラウザの互換性を何気なくテストしたところ、AJAXRequest.updateメソッドは場合によってはIEに問題があり、テストによってsettimeoutとsetIntervalの問題であることが分かった.
問題はAJAXRequestを呼び出すときに発生します.updateメソッドの場合、更新間隔および更新回数を持っていると、IEの下に問題が発生し、具体的には更新間隔を持っている場合は関数が動作し、更新回数を持っている場合は関数が指定回数更新後に実行を停止できないと表現される.
いくつかの例をテストした後、問題点を見つけた.IEでは、settimeoutとsetIntervalはパラメータ伝達をサポートしていない.
プレゼンテーションのアドレス:http://www.xujiwei.cn/demo/usetimer/
NetscapeのJavaScriptリファレンスでsettimeoutを見つける構文は次のとおりです.
 
  
setTimeout
Evaluates an expression or calls a function once after a specified number of milliseconds elapses.

setTimeout(expression, msec)
setTimeout(function, msec, arg1, ..., argN)

expression  A string containing a JavaScript expression.
msec  A numeric value or numeric string, in millisecond units.  
function  Any function.  
arg1, ..., argN  (Optional) The arguments, if any, passed to function.  

第2の使用方法は、実行時にfunctionが呼び出されたときにsettimeoutが呼び出されたときに定義されたパラメータをfunctionに渡すタイマを定義することであるが、IEでは、このような呼び出しはサポートされていない.すなわち、functionが実行されたときに、関数はこれらのパラメータを受信していない.次の例を示します.
 
  
<br>function show(str) { <br>    alert("my site: "+str); <br>} <br>setTimeout(show,100,"www.xujiwei.cn"); <br>

FirefoxとOperaでは、ブラウザが文字列「my site:www.xujiwei.cn」を正しくポップアップできるが、IEには「my site:undefined」が表示され、関数showがパラメータstrを受信していないことを示すため、表示されるのは未定義変数である.
もちろん、関数内で使用される変数がグローバル変数である場合、次のような問題を考慮する必要はありません.
 
  
<br>function show() { <br>    // url , <br>    alert("my site: "+url); <br>} <br>var url="www.xujiwei.cn"; <br>setTimeout(show,100); <br>

このコードはIEもFirefoxも正常に動作し、「my site:www.xujiwei.cn」を示しています.
変数がグローバル変数の場合、文セグメントを使用してsettimeoutを呼び出すことができます.つまり、最初の構文を使用します.
 
  
<br>function show(str) { <br>    // url , <br>    alert("my site: "+str); <br>} <br>var url="www.xujiwei.cn"; <br>setTimeout("show(url);",100); <br>

変数urlはグローバル変数であるため、タイマは定義した文セグメント「show(url);パラメータは正しく渡されますが、urlがグローバル変数ではなくローカル変数である場合、実行結果がエラーになります.
 
  
<br>function show(str) { <br>    // url , <br>    alert("my site: "+str); <br>} <br>function test() { <br>    var url="www.xujiwei.cn"; <br>    setTimeout("show(url);",100); <br>} <br>test(); <br>

このときエラーが発生し、関数testの実行時にurlが定義されていないことをプロンプトし、定義された文セグメント「show(url);」を実行します.の場合、コンテキストは関数testから離れており、urlは関数testの内部で定義されているので、関数testを実行するときに変数urlが解放されます.
ローカル変数をsettimeoutで使用し、IE内のsettimeoutがパラメータ伝達をサポートしていないという問題を解決するには、settimeoutを呼び出すときに匿名関数を定義し、この関数の内部で本来必要な操作を行う匿名関数を使用します.
 
  
<br>function show(str) { <br>    // url , <br>    alert("my site: "+str); <br>} <br>function test() { <br>    var url="www.xujiwei.cn"; <br>    setTimeout(function(){show(url);},100); <br>} <br>test(); <br>

上記の例ではsettimeoutを呼び出すと匿名の関数が定義され、その関数体は「show(url);」であり、関数が定義されているため、タイマがこの関数を呼び出すと変数urlが参照され、いくつかの関数が正しく実行できるため、文字列「my site:www.xujiwei.cn」が表示されます.
総じてsettimeoutまたはsetIntervalを使用する場合は、次の点に注意してください.
1.タイマを定義するときに使用される表現であれば、変数はグローバル変数、またはローカル変数ではなく直接の値である必要があります.
2.タイマーを定義するときに定義された呼び出し関数であれば、関数名だけを書くべきで、カッコをつけることはできません.追加すれば定義の戻り値です.
3.IEでタイマーを使用する場合はパラメータを渡すことができません.
4.IEでタイマーを使用してパラメータを渡す場合は、匿名関数を使用して、本来呼び出すべき関数を関数体で呼び出すことができます.
間違いがあれば訂正してください.