さまざまなブラウザでの setTimeout と setInterval の違い_JavaScript スキル

。 (初心者は、setTimeout と setInterval が JavaScript 関数であると考えるかもしれませんが、これは間違いです。初心者は、JavaScript オブジェクト関数と DOM オブジェクト メソッドを簡単に混同してしまいます。)

さまざまなコードの下でそれがどのように見えるか推測してみましょう。ブラウザの結果はどうなるでしょうか?

コードをコピー コードは次のとおりです。

function f(){
var s = ' 引数.長さ:' 引数.長さ '; ';
for(var i=0,n=arguments.length;is = ' [' i ']: ' 引数[ i] ';
}
アラート
}
setTimeout(f,"javascript","AAA")

私はここにいます ここで議論したいのは、いつどちらを使用するかということではなく、各ブラウザーでのこれら 2 つの方法の違いです。
当初、これら 2 つの方法が何らかの影響を与えるとは考えていませんでしたが、今回はそれらを整理して、皆さんと共有するために書き留めました。
setTimeout と setInterval のパラメーターと使用方法は同じですが、機能が異なるため、手間を省くために、setTimeout のみを例として説明し、例を示します。
setTimeout の最も一般的に使用される形式はおそらく次のとおりです:

コードをコピー コードは次のとおりです:

iTimerID = setTimeout(strJsCode, 50) //strJsCode は JS コードを含む文字列です
iTimerID = setTimeout(objFunction, 50) //objFunction は関数オブジェクトです

最初の呼び出しメソッドは、js コードを含む文字列を渡すことです。このメソッドの利点は簡潔であることですが、欠点は、操作効率が悪く、構文解析に役に立たず、潜在的なリスクがあることです。さらに重要なのは、処理がより複雑になり、これは eval の欠点と一致します。
したがって、通常は 2 番目の呼び出し方法を使用する方がよいと考えられます。 (以下の例はすべて 2 番目の呼び出しメソッドを使用しています)

次に、さまざまなブラウザーでのコードの最初の部分の結果を明らかにしましょう:
IE(6,7,8) は: 引数の長さ:0。 ;
Opera(6,7,8) は: 引数.length:2; [1]:AAA;
Firefox(3.0) は: 引数.length:3; :javascript; [1]:AAA; [2]:-15;
本当に「あなたはあなたの歌を歌い、私は私の歌を歌う」という大きな違いがあります。
Firefox (3.0) では、最後に取得される数値が特定されない場合があります。この問題については後で説明します。
(1) IE シリーズの setTimeout
まず、Microsoft が発行する DHTML リファレンス マニュアルに記載されている内容を見てみましょう。
setTimeout メソッド
指定されたミリ秒数が経過した後に式を評価します
構文
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
vCode 指定された間隔が経過した場合に必須。
iMilliSeconds 数値を指定する。
sLanguage オプション。次の値のいずれかを指定します。
VBScript 言語は VBScript です。
MSDN の setTimeout の説明。 :
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
つまり、setTimeout は 3 つのパラメーターを受け取り、スクリプト言語の種類を示します。さらに多くのパラメータを渡しても意味がありません。
つまり、IE では、次の両方が正しいことになります。
setTimeout('alert(1)', 50);
setTimeout('msgbox "終了、再試行、無視、それはあなた次第です。", vbAbortRetryIgnore vbDefaultButton2, "教えてください"', 50, ' VBScript' );
(2) Mozilla シリーズの setTimeout
Mozilla 公式 Web サイトの Gecko DOM リファレンス マニュアルの内容を見てみましょう:
window.setTimeout
概要
コードを実行します
構文
var timeoutID = window.setTimeout(func, late, [param1, param2, ...]); );
最初の 2 つのパラメータは同じであり、違いはありませんが、3 番目のパラメータは異なります。
現在、複数言語のスクリプトをサポートしているのは IE ブラウザだけであり、他のブラウザは js スクリプトのみをサポートしているため、言語タイプのパラメータを渡す必要はありません。
Mozilla は、setTimeout に渡された 3 番目以降のパラメータを、前の関数にパラメータとして順番に渡します。
Firefox、Opera、Safari、Chrome などにも同じことが当てはまります。
しかし、Mozilla が setTimeout には「Lateness」引数と呼ばれるバグがあると述べていることに気付きました。
「Lateness」引数
Mozilla では、setTimeout によって呼び出される関数には追加の「Lateness」引数が渡されます。 、タイムアウトの遅延 (ミリ秒単位) (バグ 10637 およびバグ 394769 を参照)
これは、冒頭の例の Firefox (3.0) での独自の数値のソースです。
Mozilla での setTimeout の手順:
https://developer.mozilla.org/en/DOM/window.setTimeout
(3) 他のブラウザ シリーズ (Opera、Safari、Chrome) での setTimeout
基本的には Mozilla シリーズと同じですが、Mozilla シリーズではパラメーターが 1 つ追加されているためバグはありません。

Wulin 外伝: setTimeout の使い方のヒント
(1) IE 関数の受け渡しで setTimeout を呼び出すパラメータ
上記の分析から、IE は setTimeout で呼び出された関数にパラメータを渡すことをサポートしていないことがわかります。ブラウザの世界の調和を図るために、関数呼び出しパラメータを新しい匿名関数にラップできます。例:




コードをコピー

コードは次のとおりです。 function f(a){ alert (a); } // setTimeout(f,50,'hello') // 非 IE の場合

setTimeout(function(){f('hello')}, 50); // 一般

var str='hello'
setTimeout(function(){f(str)},50); //一般


(2); question
setTimeoutで呼び出される関数が実行されるときのコンテキストはグローバルコンテキストであり、setTimeoutメソッドが呼び出されるときのコンテキストではありません。したがって、setTimeout の最初のパラメータを持つ関数が実行されるとき、これはウィンドウを指します。setTimeout メソッドを呼び出すときにこれを保持する必要がある場合は、これを渡す必要があります。例:

コードをコピー

コードは次のとおりです:

function person(name){
this.name=name;
var f=function(){alert('私の名前は ' this.name)}; (f,50); //エラー
var THIS=this;
setTimeout(function(){f.apply(THIS)},50); //正しい、ユニバーサル
setTimeout(function()) {f.call(THIS)},50); //正しい、普遍的な
}
new Person('Jack');

これですべてです。
投稿は頭で行う作業ではなく、実際にはテキストを整理したり、例を書いたり、フォーマットしたりする物理的な作業であり、最も疲れるし、時間がかかります。