问题描述

通常，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。

参考