SetTimeout a réellement un troisième paramètre ?

setTimeout a en fait un troisième paramètre ?

En parlant de setTimeout, tout le monde le connaît, et son utilisation est également très simple : setTimeout(fun, delay).

Mais vous ne le croirez peut-être pas, mais setTimeout, qui est utilisé depuis tant d'années, a en fait un troisième paramètre. Jetons un coup d'œil au troisième paramètre de setTimeout.

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

Jetons d'abord un coup d'œil à un code simple :

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

La console affiche 1, puis c'est possible. Pourquoi ne puis-je pas continuer à ajouter des paramètres ? Continuons à regarder le code suivant :

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

La sortie de la console est 3, qui est évidemment la somme des troisième et quatrième paramètres.

Après avoir vu cela, de nombreux amis devraient se rendre compte que, oui, le troisième paramètre de setTimeout est le paramètre de la première fonction de setTimeout.

En interrogeant MDN https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout nous pouvons voir la description du troisième paramètre :

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

Donc , pour être précis, setTimeout peut avoir d'innombrables paramètres, mais à partir du troisième paramètre, c'est le paramètre facultatif .

D'accord, quels problèmes pouvons-nous résoudre après avoir connu cette fonctionnalité ? La plus classique consiste à utiliser setTimeout au sein d’une boucle for.

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

L'exemple ci-dessus est une question d'entretien classique. Il sera affiché 6 fois en continu, car setTimeout est une opération asynchrone, et au moment où setTimeout est exécuté, la boucle for a été exécutée et je l'ai été. égal à 6, donc 6 fois 6 est sorti. J'ai résumé plusieurs solutions. Les amis intéressés peuvent lire mon dernier blog "À propos de l'utilisation de setTimeout dans les boucles for". À la fin de ce blog, j'ai mentionné l'utilisation du troisième paramètre de setTimeout.

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

Puisque le paramètre passé à chaque fois est la valeur extraite de la boucle for, 0~5 sera affiché dans l'ordre. Bien sûr, il s'agit toujours d'un problème de portée, mais ici le troisième paramètre de setTimeout enregistre la valeur de i. Cette solution est beaucoup plus légère que l'utilisation de fermetures.

De plus, le troisième paramètre peut également être utilisé comme fonction.

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

    setTimeout(function(j) {

        console.log(j);

    }, 1000, i);

}

La sortie finale est 0 pour la première fois et 1 pour la deuxième fois.

Vous pouvez voir que le troisième paramètre peut également être exécuté en premier puis la fonction.

Enfin, une chose à laquelle vous devez faire attention lorsque vous utilisez le troisième paramètre est le problème de compatibilité. Si vous devez être compatible avec IE9 et les versions précédentes, vous devez introduire un morceau de l'ancien code IE compatible fourni. par MDN https://developer.mozilla .org/zh-CN/docs/Web/API/Window/setTimeout#%E5%85%BC%E5%AE%B9%E6%97%A7%E7% 8E%AF%E5%A2%83%EF% BC%88polyfill%EF%BC%89, le portail est affiché ici, si vous êtes intéressé, vous pouvez le consulter.

Ce qui suit est une description de la compatibilité sur 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).

Cet article provient de la colonne tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!