$.when().done().then()的用法以及jQuery的deferred对象详解

最新推荐文章于 2025-06-30 09:17:03 发布

原创最新推荐文章于 2025-06-30 09:17:03 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析jQuery中Deferred对象及其$.when()方法的使用，通过实例代码演示如何处理异步操作，如AJAX请求，并展示如何通过deferred对象解决jQuery回调函数的局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

讲解详细地址：$.when().done().then()的用法

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行

范例：JeeSite Demo项目jssSite.js代码片段

deferAjax: function ( url, data, message ) { //jssSite.js代码中定义了名称为js的对象，此为js对象的一方法
var defer = $.Deferred();   //$.when()的参数只能是deferred对象
$.ajax( {
url: url,
type: 'POST',
data: data,
dataType: 'json',
beforeSend: function () {
js.loading( message == undefined ? js.text( "loading.submitMessage" ) : message );
$( ".btn" ).attr( "disabled", true );
},
complete: function () {
$( ".btn" ).attr( "disabled", false );
js.closeLoading();
},
success: function ( ret ) {
defer.resolve( ret );
},
error: function (ret ) {
$( ".btn" ).attr( "disabled", false );
js.showErrorMessage( ret.responseText );
js.closeLoading( 0, true )
}
} );
return defer;
}

//beforeSend  complete  success  error 的使用见:https://blog.youkuaiyun.com/xiangwang2016/article/details/87261879

$.when( js.deferAjax( url, data, "添加菜单中...." ) ).done( function ( ret ) {   //js对象调取deferAjax()方法
   console.log( JSON.stringify( ret ) );
   if ( ret.code == "0000" ) {
   js.showMessage( ret.result, "添加状态", "success", "1000" );
   js.closeCurrentTabPage( function ( contentWindow ) {
   contentWindow.$( '#dataGrid' ).dataGrid( 'refreshTreeChildren' );
   } );
   } else {
   js.showErrorMessage( ret.message );
   }
  } );