SetTimeout には実際に 3 番目のパラメータがありますか?

#setTimeout には実際に 3 番目のパラメータがありますか?

setTimeout について言えば、誰もがよく知っており、その使用法は非常に簡単です:

setTimeout(fun, late)。

しかし、信じられないかもしれませんが、長年使用されてきた setTimeout には、実際には 3 番目のパラメータがあります。 setTimeout の 3 番目のパラメータを見てみましょう。

[関連コースの推奨事項:

JavaScript ビデオ チュートリアル]

まず簡単なコードを見てみましょう:

setTimeout(function(x) {
    console.log(x);
}, 1000, 1);

コンソールは 1 を出力します。パラメーターの追加を続行できないのはなぜですか?引き続き次のコードを見てみましょう。

setTimeout(function(x,y) {
    console.log(x+y);
}, 1000, 1, 2);

コンソール出力は 3 です。これは明らかに 3 番目と 4 番目のパラメーターの合計です。

これを見た多くの友人は、そう、setTimeout の 3 番目のパラメータが setTimeout の最初の関数のパラメータであることに気づくはずです。

MDN https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout をクエリすると、3 番目のパラメータの説明を確認できます:

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

So正確に言うと、setTimeout には無数のパラメータを含めることができますが、3 番目のパラメータからは

オプションのパラメータになります。

さて、この機能を理解した後は、どのような問題を解決できるでしょうか?最も古典的な方法は、for ループ内で setTimeout を使用することです。

for(var i = 0; i<6; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

上記の例は典型的な面接の質問です。setTimeout は非同期操作であるため、6 が 6 回連続して出力され、setTimeout が実行されるまでに for ループが実行され、i が実行されます。 6 に等しいため、6 の 6 倍が出力されます。いくつかの解決策をまとめました。興味のある方は、私の前回のブログ「for ループでの setTimeout の使用について」を読んでください。このブログの最後で、setTimeout の 3 番目のパラメーターの使用について説明しました。戻りましょう。このアプローチを確認してください。

for(var i=0;i<6;i++) {
    setTimeout(function(j) {
        console.log(j);
    }, 1000, i);
}

渡される各パラメータはforループから取得した値なので、0～5が順に出力されます。もちろん、これは依然としてスコープの問題ですが、ここでは setTimeout の 3 番目のパラメーターが i の値を保存します。このソリューションはクロージャを使用するよりもはるかに軽量です。

さらに、3 番目のパラメータは関数としても使用できます。

for(var i=0;i<6;i++) {

    setTimeout(function(j) {

        console.log(j);

    }, 1000, i);

}

最終出力は、最初は 0、2 回目は 1 です。

3 番目のパラメータを最初に実行してから関数が実行されることもわかります。

最後に、3 番目のパラメーターを使用するときに注意する必要があるのは、互換性の問題です。IE9 および以前のバージョンとの互換性が必要な場合は、MDN が提供するコードを導入する必要があります。古い IE と互換性がある

https://developer.mozilla .org/zh-CN/docs/Web/API/Window/setTimeout#古い環境 (polyfill) と互換性がある 、ポータルはここに掲載されます。興味があるなら、見てみてください。

以下は MDN での互換性の説明です:

Note: Passing additional arguments to the function in the first syntax does not work in Internet Explorer 9 and below. If you want to enable this functionality on that browser, you must use a polyfill (see the Polyfill section).

この記事は

js チュートリアル 列からのものです。ぜひ学習してください。

以上がSetTimeout には実際に 3 番目のパラメータがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。