Jquery $when done then的用法详解

简介

在使用jQuery异步编程时，我们可能会遇到多个异步操作需要协同完成的场景。这时，我们可以使用Jquery的$.when()方法来解决问题。$.when()方法可以同时处理多个异步操作，待多个异步操作全部完成后执行回调函数。

语法

$.when(deferreds).done(callback)

其中，deferreds是要处理的异步任务，可以是单个deferred对象，也可以是deferred对象数组。callback是所有异步任务完成后要执行的回调函数。

示例一

假设我们有两个Ajax请求需要同时发送，待两个请求完成后，我们需要将两个返回结果相加后输出到控制台。

var request1 = $.get('/data1');
var request2 = $.get('/data2');

$.when(request1, request2).done(function(response1, response2){
  console.log(response1[0]+response2[0]);
})

在上面的代码中，我们使用$.get()方法分别发送了两个Ajax请求。在$.when()方法中传入这两个请求对象，当两个请求都执行完成后，回调函数会将返回结果解包成一个数组传给回调函数。回调函数中的参数response1和response2分别表示第一个和第二个请求的返回值。我们将这两个值相加并输出到控制台。

示例二

假设我们需要导入三个JavaScript文件，导入完成后需要执行一段初始化代码。

var script1 = $.getScript('/js1.js');
var script2 = $.getScript('/js2.js');
var script3 = $.getScript('/js3.js');

$.when(script1, script2, script3).done(function(){
  // 执行初始化代码
})

在上面的代码中，我们使用$.getScript()方法分别导入三个JavaScript文件。在$.when()方法中传入这三个请求对象，当三个请求都执行完成后，回调函数会被调用。回调函数中可以执行一段初始化代码，确保所有脚本都已经完全导入并准备好使用。

结论

Jquery的$.when()方法可以很方便地协调多个异步任务的完成时机。通过传入deferred数组，我们可以指定需要等待的异步任务，然后通过.done()方法注册回调函数，以处理这些异步任务完成后的回调操作。