Secara khusus, apa bedanya dengan default ( async: true
)?
Dalam keadaan apa yang akan saya ingin set eksplisit async
untuk false
, dan apakah hal itu ada hubungannya dengan mencegah kejadian lain pada halaman dari menembak?
Secara khusus, apa bedanya dengan default ( async: true
)?
Dalam keadaan apa yang akan saya ingin set eksplisit async
untuk false
, dan apakah hal itu ada hubungannya dengan mencegah kejadian lain pada halaman dari menembak?
Jawaban:
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
async: false
menghapus asinkron dari panggilan sepenuhnya . Panggilan untuk ajax
memblokir - kode yang mengikutinya tidak dijalankan sampai server merespons.
async: false
sudah 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
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.
Satu use case adalah melakukan ajax
panggilan 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() {}
});
});
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.
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
return php_data
pernyataan tersebut tidak boleh dalam fungsi sukses, tetapi harus di luar $.ajax()
fungsi. Saya telah menempatkan setara saya di return php_data
dalam success: function(){}
dan itu selalu kembali tidak terdefinisi
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>