有没有办法执行不冻结浏览器的同步AJAX查询?在我看来,在大多数情况下,同步请求更容易使用,但是它们阻止代码的其他部分执行的事实是一个真正的杀手。有没有办法在没有负面影响的情况下获得同步AJAX? (是的,我意识到“同步AJAX”一词是矛盾的。)
答案 0 :(得分:3)
没有。根据定义,同步是阻塞的。在该过程完成之前,什么都不能进行。这包括Web浏览器中其余的UI。
假设是异步的,所以最好的方法是设计代码以异步方式工作。
答案 1 :(得分:2)
我将提供允许此类行为影响的不良方面的示例。
让我们说你有这个节目:
<script>
var file = "foo.json";
function nullIt() {
file = null;
}
function loadFile() {
if (file != null) {
synchronousLoad(file);//imagine the load takes 5 seconds
alert("i just loaded: " + file);
}
}
window.onload = loadFile;
</script>
<button onclick="nullIt()">click me</button>
这里的坏事 -
synchronousLoad()
阻塞5秒钟时,用户单击该按钮,事件处理程序将快速运行完成。 file
变量为空。 synchronousLoad()
完成并返回,让执行在下一行代码上继续执行file
现在为空,并且输出给用户的消息已损坏。这里的真正问题是你不能以同样的方式推断你的代码。仅仅因为某些事实 第5行是真的,并不意味着它在下一行仍然是真的。这使得编写无错误程序非常困难。
某些编程语言支持多线程,您必须处理这些问题,尽管您有工具来帮助解决这些问题。 但是,对于程序员来说,它仍然需要付出额外的努力。
相比较而言,使用回调来执行异步操作是ez-mode。
答案 2 :(得分:1)
我认为不可能。您可以使用异步方法并使用AJAX完成事件,而不是尝试使用同步查询。
使用jQuery.ajax()
的示例jQuery.ajax({
url: "URL HERE",
data: "whatever you are sending"
}).done(function (data) {
// Do things with data
});
因此,您可以使用异步请求而不是使用同步请求,只需在请求完成后执行代码。因此,它不会冻结您的浏览器。
答案 3 :(得分:1)
在即将推出的ECMAScript 2016(ES7)标准中,有一组新的语言关键字,旨在执行与您正在寻找的内容非常相似的内容,称为async
和await
。< / p>
这些关键字不允许&#34;非阻塞同步AJAX&#34;但它们确实允许您以看起来的方式编写异步代码同步。这是一个简单的例子:
// Let's say you have an asynchronous function that you want to call in a synchronous
// style...
function delayedEval(delay, func) {
// First, ensure that the function returns a Promise object. If it doesn't, wrap it with
// another function that does.
return new Promise((resolve, reject) => {
setTimeout(() => resolve(func()), delay)
})
// For more on Promises, see https://goo.gl/uaoDuy (MDN link)
}
// Then, declare a function as asynchronous. This causes it to return a Promise that
// resolves to its return value, instead of returning its return value directly.
async function delayedHello() {
// Inside an async function, you can call other async functions like this, which looks
// very much like a synchronous call (even though it isn't).
let message = await delayedEval(1500, () => "Hello, world!")
console.log(message)
}
// This returns (a Promise) immediately, but doesn't print "Hello, world!" until 1.5
// seconds later. (At which point it resolves the Promise.)
delayedHello()
基本上,在没有所有的情负面影响。 (用于处理回调的大量逻辑的乱码。)
async
和await
是ES7标准中"async functions" candidate recommendation的一部分。
答案 4 :(得分:0)
由于此处其他答案中列出的原因,无法在不阻止浏览器中的其他事件的情况下执行同步AJAX调用。
但是,如果代码复杂性是您希望避免异步方法调用的主要原因,那么您可能对Javascript交叉编译器streamline.js感兴趣,它允许您编写异步方法调用,就好像它们是同步的一样,并得到与异步编写调用相同的结果。
从项目的GitHub页面:
streamline.js是一种简化异步Javascript的语言工具 编程。
而不是编写毛茸茸的代码,如:
你写道:function archiveOrders(date, cb) { db.connect(function(err, conn) { if (err) return cb(err); conn.query("select * from orders where date < ?", [date], function(err, orders) { if (err) return cb(err); helper.each(orders, function(order, next) { conn.execute("insert into archivedOrders ...", [order.id, ...], function(err) { if (err) return cb(err); conn.execute("delete from orders where id=?", [order.id], function(err) { if (err) return cb(err); next(); }); }); }, function() { console.log("orders have been archived"); cb(); }); }); }); }
function archiveOrders(date, _) { var conn = db.connect(_); conn.query("select * from orders where date < ?", [date], _).forEach_(_, function(_, order) { conn.execute("insert into archivedOrders ...", [order.id, ...], _); conn.execute("delete from orders where id=?", [order.id], _); }); console.log("orders have been archived"); }
和简化转换代码并处理回调!
无需学习控制流API!你只需要遵循一个简单的规则:
用下划线替换所有回调并编写代码,就好像全部一样 功能是同步的。
有关streamline.js的更多信息,请阅读博文Asynchronous Javascript – the tale of Harry。