javascript - js pitfall question: Apakah sebab mengapa hasil setTimeout() fungsi ialah lima 6s selepas pelaksanaan?

Question

Apakah sebab mengapa hasil bagi fungsi setTimeout() ialah lima 6s?

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

Walaupun saya menyelesaikan masalah menggunakan penutupan js dan mendapat 1, 2, 3, 4, 5 yang diingini, saya masih tidak faham mengapa lima 6 muncul dalam kod di atas?

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

Answer 1

Perkara pertama yang anda perlu fahami ialah mekanisme tugas JS ialah mekanisme baris gilir.

Jadi saya tidak melalui gelung for tetapi hanya meletakkan tugas setTimeout di belakang baris gilir Iaitu, kod yang dilaksanakan dalam setTimeout hanya akan dilaksanakan selepas gelung for dilaksanakan, jadi nilai bagi. i pada masa itu tidak memenuhi gelung for Jika nilainya buruk, kod setTimeout akan dilaksanakan.

Pendapat peribadi, sila nyatakan jika ada yang salah

Answer 2

var boleh ditukar kepada let

var ialah definisi global, i tidak membentuk penutupan, dan log(i) mencetak nilai akhir i 6

let ialah domain peringkat blok

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

Answer 3

setTimeout mempunyai dua ciri, ini dipisahkan daripada konteks ini, dan panggilannya adalah tak segerak.

Ini disebabkan oleh [asynchronous], gelung for akan dilengkapkan dahulu, dan kemudian setTimeout dilaksanakan, kerana gelung for akan menjadi 6 pada penghujung setiap kali ia dilaksanakan - - jadi secara semula jadi setTimeout dan kemudian panggil i akan lima 6

Penyelesaian 1:

var 换 let

Penyelesaian 2:

楼主自己用的闭包

Penyelesaian 3:

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