JavaScript console.log menyebabkan kesalahan: "Synchronous XMLHttpRequest pada utas utama sudah usang ..."

Saya telah menambahkan log ke konsol untuk memeriksa status variabel yang berbeda tanpa menggunakan debugger Firefox.

Namun, di banyak tempat di mana saya menambahkan file console.logsaya main.js, saya menerima kesalahan berikut alih-alih pesan tulisan tangan kecil yang indah untuk diri saya sendiri:

Sinkronisasi XMLHttpRequest pada utas utama sudah usang karena efeknya yang merugikan bagi pengalaman pengguna akhir. Untuk bantuan lebih lanjut http://xhr.spec.whatwg.org/

Alternatif atau pembungkus apa yang console.logdapat saya tambahkan ke penggunaan kode saya yang tidak akan menyebabkan kesalahan ini?

Apakah saya "salah melakukannya"?

Ini terjadi pada saya ketika saya malas dan menyertakan tag skrip sebagai bagian dari konten yang dikembalikan. Dengan demikian:

Konten HTML Sebagian:

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

Tampaknya, setidaknya dalam kasus saya, bahwa jika Anda mengembalikan konten HTML seperti itu melalui xhr, Anda akan menyebabkan jQuery melakukan panggilan untuk mendapatkan skrip itu. Panggilan itu terjadi dengan flag async false karena menganggap Anda memerlukan skrip untuk melanjutkan memuat.

Dalam situasi seperti ini, Anda akan lebih baik dilayani dengan melihat ke dalam kerangka kerja sejenis dan hanya mengembalikan objek JSON, atau tergantung pada backend Anda dan templating Anda bisa mengubah cara Anda memuat skrip Anda.

Anda juga bisa menggunakan jQuery'sgetScript() untuk mengambil skrip yang relevan. Ini biola, Ini hanya salinan langsung dari contoh jQuery, tapi saya tidak melihat peringatan yang dilemparkan ketika skrip dimuat seperti itu.

Contoh

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

Pesan peringatan DAPAT MENJADI karena permintaan XMLHttpRequest dalam utas utama dengan flag async disetel ke false.

https://xhr.spec.whatwg.org/#synchronous-flag :

Synchronous XMLHttpRequest di luar pekerja sedang dalam proses dihapus dari platform web karena memiliki efek yang merugikan pengalaman pengguna akhir. (Ini adalah proses panjang yang membutuhkan waktu bertahun-tahun.) Pengembang tidak boleh memberikan false untuk argumen async ketika lingkungan global JavaScript adalah lingkungan dokumen. Agen pengguna sangat disarankan untuk memperingatkan tentang penggunaan tersebut dalam alat pengembang dan dapat bereksperimen dengan melempar pengecualian InvalidAccessError saat itu terjadi.

Arah di masa depan adalah hanya mengizinkan XMLHttpRequests di utas pekerja. Pesan itu dimaksudkan sebagai peringatan untuk efek itu.

Saya juga menghadapi masalah yang sama tetapi dapat memperbaikinya dengan meletakkan async: true. Saya tahu ini secara default benar tetapi berfungsi ketika saya menulisnya secara eksplisit

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Debugger hidup Visual Studio 2015/2017 menyuntikkan kode yang berisi panggilan usang.

Kadang-kadang perlu ajax memuat skrip tetapi menunda dokumen siap sampai setelah skrip dimuat.

jQuery mendukung ini dengan holdReady()fungsinya.

Contoh penggunaan:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

Pemuatan skrip yang sebenarnya adalah asinkron ( tidak ada kesalahan ), tetapi efeknya sinkron jika seluruh JavaScript Anda berjalan setelah dokumen siap .

Fitur lanjutan ini biasanya digunakan oleh pemuat skrip dinamis yang ingin memuat JavaScript tambahan seperti plugin jQuery sebelum mengizinkan acara siap terjadi, meskipun DOM mungkin sudah siap.

Dokumentasi:
https://api.jquery.com/jquery.holdready

PEMBARUAN 7 Januari 2019

Dari JQMIGRATE :

jQuery.holdReady () sudah usang

Penyebab: The jQuery.holdReady()Metode telah usang karena efek yang merugikan pada kinerja global halaman. Metode ini dapat mencegah semua kode pada halaman dari inisialisasi untuk jangka waktu yang lama.

Solusi: Tulis ulang halaman sehingga tidak mengharuskan semua penangan siap jQuery ditunda. Ini dapat dilakukan, misalnya, dengan hanya memuat kode yang membutuhkan keterlambatan saat aman untuk dijalankan. Karena kompleksitas metode ini, jQuery Migrate tidak berupaya mengisi fungsionalitas. Jika versi mendasar dari jQuery yang digunakan dengan jQuery Migrate tidak lagi berisi jQuery.holdReady()kode akan gagal tak lama setelah peringatan ini muncul.

Untuk menghindari peringatan ini, jangan gunakan:

async: false

dalam panggilan $ .ajax () Anda. Ini adalah satu-satunya fitur XMLHttpRequest yang sudah usang.

Standarnya adalah

async: true

jQuery telah mencabut XMLHTTPRequest sinkron

@Webgr sebagian jawaban sebenarnya membantu saya men-debug peringatan ini @ konsol log, malu bagian lain dari jawaban itu membawa banyak downvotes :(

Ngomong-ngomong, inilah cara saya mengetahui apa penyebab peringatan ini dalam kasus saya:

1. Gunakan Chrome Browser> Hit F12 untuk membawa DevTools
2. Buka menu laci (di Chrome 3 titik vertikal di kanan atas)
3. Di bawah Konsol > centang Log XMLHttpRequests opsi
4. Muat ulang halaman Anda yang memberi Anda kesalahan dan amati apa yang terjadi pada setiap permintaan ajax di log konsol.

Dalam kasus saya, plugin lain memuat 2 perpustakaan .js setelah setiap panggilan ajax, yang sama sekali tidak diperlukan atau diperlukan. Menonaktifkan plugin jahat menghapus peringatan dari log. Dari titik itu, Anda dapat mencoba untuk memperbaiki masalah sendiri (misalnya membatasi memuat skrip ke halaman atau acara tertentu - ini terlalu spesifik untuk jawaban di sini) atau hubungi pengembang plugin pihak ke-3 untuk menyelesaikannya.

Semoga ini bisa membantu seseorang.

Saya telah melihat jawaban yang mengesankan. Saya pikir Dia harus memberikan kode yang memberinya masalah. Diberikan contoh di bawah ini, Jika Anda memiliki skrip untuk ditautkan ke jquery di page.php maka Anda mendapatkan pemberitahuan itu.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

Saya mendapatkan peringatan seperti itu dalam kasus berikut:

1) file1 yang berisi <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Halaman memiliki kolom input. Saya memasukkan beberapa nilai di kolom input dan klik tombol. Jquery mengirimkan input ke file php eksternal.

2) file php eksternal juga mengandung jquery dan dalam file php eksternal saya juga disertakan <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Karena jika ini saya mendapat peringatan.

Dihapus <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> dari file php eksternal dan berfungsi tanpa peringatan.

Seperti yang saya pahami tentang memuat file pertama (file1), saya memuat jquery-1.10.2.jsdan karena halaman tidak memuat ulang (mengirimkan data ke file php eksternal menggunakan jquery $.post), maka jquery-1.10.2.jsterus ada. Jadi tidak perlu lagi memuatnya.

Saya mendapatkan pengecualian ini ketika saya menetapkan url di kueri seperti "example.com/files/text.txt". Saya telah mengubah url menjadi " http://example.com/files/text.txt " dan pengecualian ini hilang.

Dan saya mendapatkan pengecualian ini untuk memasukkan satu skrip can.js ke dalam skrip lain, misalnya,

{{>anotherScript}}

Dalam aplikasi MVC, saya mendapat peringatan ini karena saya membuka Kendo Window dengan metode yang mengembalikan View (), bukan PartialView (). Tampilan () mencoba membuka kembali semua skrip halaman.

Itu terjadi pada saya di ZF2. Saya mencoba memuat konten Modal tetapi saya lupa menonaktifkan tata letak sebelumnya.

Begitu:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

Seperti @Nycen, saya juga mendapatkan kesalahan ini karena tautan ke Cloudfare. Milik saya adalah untuk plugin Select2 .

untuk memperbaikinya saya baru saja dihapus

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

dan kesalahan itu hilang.

1. Di Chrome, press F12
2. Alat develomping-> tekan F1.
3. Lihat pengaturan-> umum-> Penampilan: "Don't show chrome Data Saver warning"- setel kotak centang ini.
4. Lihat pengaturan-> umum-> Konsol: "Log XMLHTTPRequest"- setel kotak centang ini juga.

Nikmati

Ini diselesaikan dalam kasus saya.

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

Jawaban ini dimasukkan dalam tautan ini

/programming/28322636/synchronous-xmlhttprequest-warning-and-script

Dalam kasus saya ini disebabkan oleh skrip flexie yang merupakan bagian dari aplikasi "Seleksi CDNJS" yang ditawarkan oleh Cloudflare .

Menurut Cloudflare "Aplikasi ini tidak digunakan lagi pada bulan Maret 2015". Saya mematikannya dan pesan itu langsung menghilang.

Anda dapat mengakses aplikasi dengan mengunjungi https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

NB: ini adalah salinan jawaban saya di utas ini Synchronous XMLHttpRequest warning and <script> (Saya mengunjungi keduanya ketika mencari solusi)

Saya memperbaikinya dengan langkah-langkah di bawah ini:

1. Periksa skrip CDN Anda dan tambahkan secara lokal.
2. Pindahkan skrip Anda ke dalam bagian tajuk.

Dalam kasus khusus saya, saya membuat sebagian Rails tanpa render layout: falseyang rendering ulang seluruh tata letak, termasuk semua skrip dalam <head>tag. Menambahkan render layout: falseke tindakan pengontrol memperbaiki masalah.

Bagi saya, masalahnya adalah bahwa dalam permintaan OK, saya mengharapkan respons ajax menjadi string HTML yang diformat dengan baik seperti tabel, tetapi dalam kasus ini, server mengalami masalah dengan permintaan, mengarahkan ke halaman kesalahan, dan karena itu mengembalikan kembali kode HTML dari halaman kesalahan (yang memiliki <scripttag di suatu tempat. Saya menghibur login respon ajax dan saat itulah saya menyadari itu bukan apa yang saya harapkan, kemudian mulai melakukan debugging saya.

Pertanyaannya muncul pada tahun 2014 dan ini tahun 2019 jadi saya kira itu baik untuk mencari opsi yang lebih baik.

Anda cukup menggunakan fetch api dalam Javascript yang memberi Anda lebih banyak fleksibilitas.

misalnya, lihat kode ini

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });