javascript - Question piège js : quelle est la raison pour laquelle le résultat de la fonction setTimeout() est de cinq 6 après l'exécution ?

Question

Quelle est la raison pour laquelle le résultat de la fonction setTimeout() est cinq 6 ?

 for (var i = 1; i <= 5; i++) {
        setTimeout(function timer() {
            console.log(i);
        }, i * 1000);
    }
// 其实我们想得到的结果是1，2，3，4，5，结果却是五个6

Bien que j'aie résolu le problème en utilisant la fermeture js et obtenu les 1, 2, 3, 4, 5 souhaités, je ne comprends toujours pas pourquoi cinq 6 apparaissent dans le code ci-dessus ?

 for (var i = 1; i <= 5; i++) {
        (function(j) {
            setTimeout(function timer() {
                console.log(j);
            }, j * 1000);
        })(i);
        
//通过一个立即执行函数，为每次循环创建一个单独的作用域

Answer 1

La première chose que vous devez comprendre est que le mécanisme de tâches de JS est le mécanisme de file d'attente.

Ainsi, au lieu d'exécuter une boucle for, nous plaçons simplement la tâche setTimeout à la fin de la file d'attente. Autrement dit, le code exécuté dans setTimeout ne sera exécuté qu'après l'exécution de la boucle for, donc la valeur de i à ce moment-là est. la valeur qui ne satisfait pas la boucle for exécutera le code setTimeout.

Opinion personnelle, veuillez signaler s'il y a quelque chose qui ne va pas

Answer 2

var peut être modifié pour laisser

var est une définition globale, i ne forme pas de fermeture, et log(i) imprime la valeur finale de i 6

let est un domaine de niveau bloc

for (let i = 1; i <= 5; i++) {
        setTimeout(function timer() {
            console.log(i);
        }, i * 1000);
    }

Answer 3

setTimeout a deux caractéristiques : son this est séparé du this du contexte, et son appel est asynchrone.

Cela est dû à [asynchrone], la boucle for sera terminée en premier, puis setTimeout sera exécuté, car la boucle for sera 6 à la fin à chaque exécution - donc naturellement setTimeout et puis j'appellerai j'aurai cinq ans 6

Solution 1 :

var 换 let

Solution 2 :

楼主自己用的闭包

Solution trois :

//类似于方法二，使用setTimeout的第三个参数直接传参
  for (var i = 1; i <= 5; i++) {
    setTimeout(function(i) {
      console.log(i);
    }, i * 1000,i);
  }