问题描述

通常,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.cssneed.js可以同时开始加载,等到两个都加载完时立即进行callback。怎么做到呢?

解决方法

实际上jQuery早就考虑到了这种需求,jQuery.when()就是专门干这件事情的。

废话不多说,直接上代码:

$.when(
    $.get("res/need.css"),
    $.get("res/need.js")
    ).then(function(){
        // Do something
});

这样need.cssneed.js都会立即加载,但直到两者都加载完成后,才会执行callback。

参考