jQuery: 用when实现Ajax多请求
问题描述
通常,jQuery提供的Ajax方法能够在成功获取指定资源后,提供一个callback供后续处理;如:
$.get("res/need.js", function(js) {
// Do something
});
而有些时候我们希望能够在获取多个指定资源后,再进行callback处理;如在css和js都Ajax获取成功后,再执行相关代码。
可能我们会写成下面这样:
$.get("res/need.css", function(css) {
$.get("res/need.js", function(js) {
// Do something
});
});
这样虽然可行,而且采用两个Ajax请求,不会“影响”页面加载,但显然这样加载速度很慢,因为need.js
需要等到need.css
加载完才开始加载,而我们期望的是need.css
和need.js
可以同时开始加载,等到两个都加载完时立即进行callback。怎么做到呢?
解决方法
实际上jQuery早就考虑到了这种需求,[jQuery.when()]就是专门干这件事情的。
废话不多说,直接上代码:
$.when(
$.get("res/need.css"),
$.get("res/need.js")
).then(function(){
// Do something
});
这样need.css
和need.js
都会立即加载,但直到两者都加载完成后,才会执行callback。