异步与同步
“Ajax”中的“A”表示“异步”。这个词的潜在含义对我来说很难理解,我知道熟悉它可能需要一些时间,但它是现代 Web 开发和一般计算中的一个关键主题,因此值得付出一点努力。
大多数情况下,您的代码以同步方式运行,因此您不必担心您的环境是否已准备好。考虑到下面的代码,很明显“v”在你需要的时候就可以使用了,你不必等待它被初始化。
var v = 1; // no delay during initialization
var u = v + 1; // you can use "v" immediately
即使此时有延迟,同步处理也会在执行下一行之前等待指令完成。因此,您可以确定“v”会在您需要时准备就绪。现在,让我们看看如果我们引入一个异步任务,这段代码会如何表现。
function ajax (url) {
// 1. go to url asynchronously
// 2. bring back the value
// 3. return the value
};
var v = ajax('mywebsite.com'); // undefined
var u = v + 1; // "v" is not ready -> NaN
任务的编号方式反映了你的想法,但它不正确,实际上 3 发生在 2 之前。粗略地说,ajax() 不会足够快地获得值并在第一个任务完成之前返回,因此,该值不可用,程序失败。
更准确地说,只要调用ajax(),程序就会开始与远程计算机通信。这样的任务可以持续几秒钟,但程序知道它的异步特性,因此它不会等待结果并立即跳转到下一行。
现在我认为您应该更好地了解发生了什么。要点是程序不一定在单个流程中执行,可能会有一些任务与其余任务分开执行,并行。如果您仍然感到困惑,请花点时间考虑一下,然后再进一步:-)
如何处理异步任务?
那么,如何避免在执行异步任务时让程序崩溃?使用回调。回调是一个函数,它作为参数传递给另一个函数并在内部调用。让我们看看如何使用回调修复之前的代码块:
function ajax (url, callback) {
// 1. go to url asynchronously
// 2. bring the value
// 3. when previous tasks done, do callback(value)
};
ajax('mywebsite.com', function (value) {
var v = value;
var u = v + 1;
});
要完全理解它的工作原理,您需要知道有一个内部机制充当您的程序和远程计算机之间的中间人。一旦远程计算机的响应可用,该机制就会调用回调函数。
好吧,我想现在就够了,我不会再打扰你了;-) 详细信息你应该浏览jQuery's docs on Ajax,它可能是一个很好的起点。作为结论,这是ajax() 的可能实现(不是防弹的)。享受吧。
function ajax (url, callback) {
var req = new XMLHttpRequest();
req.open('GET', url, true); // true = asynchronous
req.onload = function () {
var value = JSON.parse(this.responseText);
callback(value);
};
req.send(null);
}
其他内容(点击放大)
同步:主流程在远程查询期间暂停。
异步:主要流程在远程查询期间继续进行。