"async: false" 在 jQuery.ajax() 中有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1478295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does "async: false" do in jQuery.ajax()?
提问by Joe D
Specifically, how does it differ from the default ( async: true) ?
具体来说，它与默认值 ( async: true) 有何不同？
In what circumstances would I want to explicit set asyncto false, and does it have something to do with preventing other events on the page from firing ?
在什么情况下我想显式设置async为false，它是否与防止页面上的其他事件触发有关？
回答by Sean Vieira
Does it have something to do with preventing other events on the page from firing?
它与防止页面上的其他事件触发有关吗？
Yes.
是的。
Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.
将 async 设置为 false 意味着您正在调用的语句必须在调用函数中的下一个语句之前完成。如果您设置 async: true ，则该语句将开始执行，并且无论 async 语句是否已完成，都将调用下一条语句。
For more insight see: jQuery ajax success anonymous function scope
有关更多见解，请参阅： jQuery ajax 成功匿名函数范围
回答by u775856
async:false= Code paused. (Other code waitingfor this to finish.)async:true= Code continued. (Nothing gets paused. Other code is not waiting.)
async:false= 代码暂停。（其他代码等待此完成。）async:true= 代码继续。（没有任何暂停。其他代码没有等待。）
As simple as this.
就这么简单。
回答by Mohit
Async:Falsewill hold the execution of rest code. Once you get response of ajax, only then, rest of the code will execute.
Async:False将保持其余代码的执行。一旦你得到 ajax 的响应，只有这样，其余的代码才会执行。
回答by John Millikin
If you disable asynchronous retrieval, your script will block until the request has been fulfilled. It's useful for performing some sequence of requests in a known order, though I find async callbacks to be cleaner.
如果您禁用异步检索，您的脚本将阻塞，直到请求完成。尽管我发现异步回调更清晰，但它对于以已知顺序执行某些请求序列很有用。
回答by Tony
One use case is to make an ajaxcall before the user closes the window or leaves the page. This would be like deleting some temporary records in the database before the user can navigate to another site or closes the browser.
一种用例是ajax在用户关闭窗口或离开页面之前进行调用。这就像在用户可以导航到另一个站点或关闭浏览器之前删除数据库中的一些临时记录。
$(window).unload(
function(){
$.ajax({
url: 'your url',
global: false,
type: 'POST',
data: {},
async: false, //blocks window close
success: function() {}
});
});
回答by i474232898
From
从
https://xhr.spec.whatwg.org/#synchronous-flag
https://xhr.spec.whatwg.org/#synchronous-flag
Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs. The future direction is to only allow XMLHttpRequests in worker threads. The message is intended to be a warning to that effect.
工作人员外部的同步 XMLHttpRequest 正在从 Web 平台中删除，因为它会对最终用户的体验产生不利影响。（这是一个漫长的过程，需要很多年。）当 JavaScript 全局环境是文档环境时，开发人员不得为 async 参数传递 false。强烈鼓励用户代理警告开发人员工具中的此类使用，并在发生时尝试抛出 InvalidAccessError 异常。未来的方向是在工作线程中只允许 XMLHttpRequests。该消息旨在警告该效果。
回答by Harsh Gupta
Setting async to false means the instructions following the ajax request will have to wait for the request to complete. Below is one case where one have to set async to false, for the code to work properly.
将 async 设置为 false 意味着 ajax 请求之后的指令必须等待请求完成。下面是一种必须将 async 设置为 false 才能使代码正常工作的情况。
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;
})();
Above example clearly explains the usage of async:false
上面的例子清楚地解释了async:false的用法
By setting it to false, we have made sure that once the data is retreived from the url,only after that return php_data;is called
通过将其设置为 false，我们确保一旦从url检索数据，仅在此之后返回 php_data；叫做
回答by Samir Lakhani
use this option decimals: 3
使用此选项小数：3
here is url: https://demos.telerik.com/kendo-ui/numerictextbox/index
这是网址：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>
