Apa yang dilakukan “async: false” di jQuery.ajax ()?

256

Secara khusus, apa bedanya dengan default ( async: true)?

Dalam keadaan apa yang akan saya ingin set eksplisit asyncuntuk false, dan apakah hal itu ada hubungannya dengan mencegah kejadian lain pada halaman dari menembak?

jquery Joe D
sumber
terlihat mirip dengan pertanyaan ini: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req membuat panggilan sinkron. ...
CSharpAtl
Ya, menurut saya itu harus disebut sesuatu selain "Ajax" (Asynchronous JavaScript And XML) jika tidak asinkron ...
devlord
Asinkron berarti skrip akan mengirim permintaan ke server, dan melanjutkan eksekusi tanpa menunggu balasan. Segera setelah balasan diterima, acara browser diaktifkan, yang pada gilirannya memungkinkan skrip untuk melakukan tindakan terkait.
SagarPPanchal

Jawaban:

300

Apakah ada hubungannya dengan mencegah peristiwa lain di laman agar tidak memecat?

Iya.

Menyetel async ke false berarti bahwa pernyataan yang Anda panggil harus diisi sebelum pernyataan berikutnya dalam fungsi Anda dapat dipanggil. Jika Anda menetapkan async: true maka pernyataan itu akan memulai eksekusi dan pernyataan berikutnya akan dipanggil terlepas dari apakah pernyataan async telah selesai.

Untuk wawasan lebih lanjut, lihat: jQuery ajax berhasil lingkup fungsi anonim

Sean Vieira
sumber
12
Saya selalu bertanya-tanya bagaimana ini dilakukan, karena JavaScript tidak di-threaded.
Matt
4
@ L.DeLeo - tidak, tidak sama sekali - ditangguhkan adalah cara lain untuk mengelola kompleksitas panggilan fungsi asinkron - async: false menghapus asinkron dari panggilan sepenuhnya . Panggilan untuk ajax memblokir - kode yang mengikutinya tidak dijalankan sampai server merespons.
Sean Vieira
14
Ingat bahwa ini juga berarti bahwa browser tidak akan menangkap / memicu peristiwa apa pun yang terjadi ketika ajax sedang dijalankan. Saya menemukan ini dengan cara yang sulit, mencoba mencari tahu mengapa Firefox tidak memicu acara klik. Ternyata itu karena peristiwa blur "paksa" dengan panggilan sinkronisasi berikut yang memblokirnya.
PålOliver
3
@Matt tidak, itu bukan (lagi ^^) w3schools.com/html/html5_webworkers.asp
borrel
5
Tampaknya async: falsesudah mati, saya mencobanya dan mendapatkan18:17:49.384 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ 1 jquery.js:9061:4
Aba
120
  • async:false= Kode dijeda . (Kode lain menunggu ini selesai.)
  • async:true= Kode berlanjut . (Tidak ada yang dijeda. Kode lain tidak menunggu .)

Sesederhana ini.

夏 期 劇場
sumber
"Sisa kode" yang cukup umum, jelaskan cakupan kode yang sedang dijeda.
bart
26

Async:Falseakan menahan eksekusi kode istirahat. Setelah Anda mendapatkan respons ajax, hanya kemudian, sisa kode akan dieksekusi.

Mohit
sumber
18

Jika Anda menonaktifkan pencarian asinkron, skrip Anda akan diblokir hingga permintaannya dipenuhi. Ini berguna untuk melakukan beberapa urutan permintaan dalam urutan yang diketahui, meskipun saya menemukan panggilan balik async menjadi lebih bersih.

John Millikin
sumber
Joe: itu tergantung pada apakah Anda memiliki utas pekerja di latar belakang.
John Millikin
10

Satu use case adalah melakukan ajaxpanggilan sebelum pengguna menutup jendela atau meninggalkan halaman. Ini seperti menghapus beberapa catatan sementara dalam database sebelum pengguna dapat menavigasi ke situs lain atau menutup browser.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
sumber
51
Tidak ada jumlah JavaScript yang akan menghentikan penutupan jendela browser
jammykam
Saya membutuhkan async false untuk sesuatu yang sama sekali tidak terkait tetapi itu memecahkan masalah saya karena memungkinkan skrip saya untuk mengambil nilai dari file xml sebelum mengisi itu pada halaman sebagai tidak terdefinisi.
J_L
8

Dari

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 masa depan adalah dengan hanya mengizinkan XMLHttpRequests di utas pekerja. Pesan itu dimaksudkan sebagai peringatan untuk efek itu.

i474232898
sumber
8

Mengatur async ke false berarti instruksi mengikuti permintaan ajax harus menunggu permintaan selesai. Di bawah ini adalah satu kasus di mana kita harus menetapkan async ke false, agar kode berfungsi dengan benar.

var phpData = (function get_php_data() {
  var php_data;
  $.ajax({
    url: "http://somesite/v1/api/get_php_data",
    async: false, 
    //very important: else php_data will be returned even before we get Json from the url
    dataType: 'json',
    success: function (json) {
      php_data = json;
    }
  });
  return php_data;
})();

Contoh di atas dengan jelas menjelaskan penggunaan async: false

Dengan mengaturnya ke false, kami telah memastikan bahwa setelah data diambil dari url , hanya setelah itu kembali php_data; disebut

Harsh Gupta
sumber
Untuk berjaga-jaga jika ada orang lain yang memiliki masalah yang sama dengan saya: Jawaban ini menggarisbawahi bahwa return php_datapernyataan tersebut tidak boleh dalam fungsi sukses, tetapi harus di luar $.ajax()fungsi. Saya telah menempatkan setara saya di return php_datadalam success: function(){}dan itu selalu kembali tidak terdefinisi
gordon613
0

gunakan desimal opsi ini : 3

di sini adalah url: https://demos.telerik.com/kendo-ui/numerictextbox/index

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/numerictextbox/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>


</head>
<body>

        <div id="example">
            <div id="add-product" class="demo-section k-content">
                <p class="title">Add new product</p>
                <ul id="fieldlist">
                    <li>
                        <label>
                            Price:
                            <input id="currency" type="number" title="currency" value="30" min="0" max="100" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Price Discount:
                            <input id="percentage" value="0.05" title="percentage" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Weight:
                            <input id="custom" value="2" title="custom" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Currently in stock:
                            <input id="numeric" type="number" title="numeric" value="17" min="0" max="100" step="1" style="width: 100%;" />
                        </label>
                    </li>
                </ul>
            </div>


            <script>
                $(document).ready(function() {
                    // create NumericTextBox from input HTML element
                    $("#numeric").kendoNumericTextBox();

                    // create Curerncy NumericTextBox from input HTML element
                    $("#currency").kendoNumericTextBox({
                        format: "c",
                        decimals: 3
                    });

                    // create Percentage NumericTextBox from input HTML element
                    $("#percentage").kendoNumericTextBox({
                        format: "p0",
                        min: 0,
                        max: 0.1,
                        step: 0.01
                    });

                    // create NumericTextBox from input HTML element using custom format
                    $("#custom").kendoNumericTextBox({
                        format: "#.00 kg"
                    });
                });
            </script>

            <style>
                .demo-section {
                    padding: 0;
                }

                #add-product .title {
                    font-size: 16px;
                    color: #fff;
                    background-color: #1e88e5;
                    padding: 20px 30px;
                    margin: 0;
               }

               #fieldlist {
                   margin: 0 0 -1.5em;
                   padding: 30px;
               }

               #fieldlist li {
                   list-style: none;
                   padding-bottom: 1.5em;
               }

               #fieldlist label {
                   display: block;
                   padding-bottom: .6em;
                   font-weight: bold;
                   text-transform: uppercase;
                   font-size: 12px;
               }

               #fieldlist label .k-numerictextbox {
                   font-size: 14px;
               }
            </style>

        </div>


</body>
</html>
Samir Lakhani
sumber