Adakah console.log() tak segerak atau segerak?

Question

Saya sedang membaca "Async Javascript" oleh Trevor Burnham. Ini adalah buku yang hebat setakat ini.

Dia bercakap tentang coretan dan console.log ini sebagai "tak segerak" dalam konsol Safari dan Chrome. Malangnya saya tidak boleh meniru ini. Ini ialah kod:

var obj = {};
console.log(obj);
obj.foo = 'bar';
// hasil saya: Objek{};
// Hasil buku: {foo:bar};

Jika ini tidak segerak, saya menjangkakan hasilnya adalah seperti yang terdapat dalam buku. console.log() dimasukkan ke dalam baris gilir acara sehingga semua kod telah dilaksanakan, kemudian ia dijalankan dan mempunyai atribut bar.

Nampaknya ia berjalan secara serentak.

Adakah saya salah menjalankan kod ini? Adakah console.log sebenarnya tidak segerak?

Answer 1

Ini sebenarnya bukan jawapan kepada soalan, tetapi ia mungkin berguna untuk sesiapa sahaja yang terjumpa siaran ini dan ulasan ini terlalu panjang:

window.console.logSync = (...args) => {
  try {
    args = args.map((arg) => JSON.parse(JSON.stringify(arg)));
    console.log(...args);
  } catch (error) {
    console.log('Error trying to console.logSync()', ...args);
  }
};

Ini akan mencipta versi pseudo-segerak console.log tetapi dengan kaveat yang sama yang disebut dalam jawapan yang diterima.

Memandangkan nampaknya kebanyakan penyemak imbas hari ini console.log tidak segerak dalam beberapa cara, anda mungkin mahu menggunakan fungsi seperti ini dalam beberapa kes.

Answer 2

console.log Tiada penyeragaman jadi tingkah laku agak tidak ditentukan dan boleh menukar dengan mudah antara versi alat pembangun yang berbeza. Buku anda mungkin sudah lapuk, dan jawapan saya mungkin akan lapuk tidak lama lagi.

Untuk kod kami, tiada bezanya sama ada console.log tidak segerak atau tidak, ia tidak memberikan sebarang jenis panggilan balik dan lain-lain dan nilai yang anda berikan sentiasa dirujuk dan dinilai apabila anda memanggil fungsi tersebut.

Kami tidak benar-benar tahu apa yang akan berlaku seterusnya (baik, kami boleh, kerana Firebug, Chrome Devtools dan Opera Dragonfly semuanya adalah sumber terbuka). Konsol perlu menyimpan nilai yang dilog di suatu tempat dan memaparkannya pada skrin. Rendering pasti akan berlaku secara tidak segerak (tertakluk kepada kemas kini terhad kadar), begitu juga interaksi masa hadapan dengan objek yang dilog dalam konsol (seperti memanjangkan sifat objek).

Jadi konsol boleh mengklon (mensiri) objek boleh ubah log anda, atau ia akan menyimpan rujukan kepada mereka. Yang pertama tidak berfungsi dengan objek dalam/besar. Selain itu, sekurang-kurangnya pemaparan awal dalam konsol mungkin menunjukkan keadaan "semasa" objek, iaitu keadaan semasa rakaman - dalam contoh anda, anda lihat Object {}.

Walau bagaimanapun, apabila anda mengembangkan objek untuk memeriksa lebih lanjut sifatnya, konsol hanya boleh menyimpan rujukan kepada objek dan sifatnya, menunjukkannya sekarang akan menunjukkan keadaan semasanya (bermutasi). Jika anda klik pada atribut +，您应该能够在示例中看到 bar.

Berikut ialah tangkapan skrin yang disiarkan dalam laporan pepijat menerangkan "pembetulan" mereka:

Oleh itu, sesetengah nilai mungkin tidak dirujuk sehingga lama selepas ia direkodkan, dan penilaian nilai ini agak malas ("apabila diperlukan"). Contoh paling terkenal bagi perbezaan ini ialah dalam soalan Adakah konsol JavaScript Chrome mengendalikan penilaian malas tatasusunan?

Penyelesaian adalah untuk memastikan syot kilat bersiri objek sentiasa dilog, cth. dengan melakukan console.log(JSON.stringify(obj)). Walau bagaimanapun, ini hanya berfungsi untuk objek bukan bulat dan agak kecil. Lihat juga Bagaimana untuk menukar tingkah laku lalai console.log masuk Safari? .

Penyelesaian yang lebih baik ialah menggunakan titik putus untuk penyahpepijatan, di mana pelaksanaan berhenti sepenuhnya dan anda boleh memeriksa nilai semasa pada setiap titik. Gunakan pengelogan hanya untuk data boleh bersiri dan tidak boleh diubah.