jquery ajax.then,神奇的then方法——jQuery回调、递延对象总结

原标题:神奇的then方法——jQuery回调、递延对象总结

前言:

什么叫做递延对象,生成一个递延对象只需调用jQuery.Deferred函数,deferred这个单词译为延期,推迟,即延迟的意思,那么在jQuery中

又是如何表达延迟的呢,从递延对象中的then方法或许能找到这种延迟的行为,本文重点解读递延对象中的then方法

神奇的then方法

在实际项目应用中,一个页面或许有多个ajax请求,你可能会这样做:

$.ajax({ url1, ... });$.ajax({ url2, ... });$.ajax({ url3, ... });...

这样做的缺点:

1、多个ajax同时发送请求,可能会造成服务器压力,对于富应用页面来说,如果请求过多,那是必然的;

2、对于页面底部,或者说首屏不展示给用户浏览的部分需要发送的ajax请求,没有必要让它一开始加载页面后就发送请求,这样会造成页面响应缓慢

jQuery递延对象中的then方法好像天生就是为了解决以上问题而设计的,它可以按照顺序依次处理多个异步请求,即第一个请求处理完后,

再处理第二个请求,以此类推,这样既可以减轻服务器压力,又可以先发送首屏(从上到下)页面部分的请求,使页面响应更快

代码实例

varpromiseA = $.get(urlA);//这里添加promiseA的回调varpromiseB = promiseA.then( function(){

return$.get(urlB);});//这里添加promiseB的回调

varpromiseC = promiseB.then( function(){

return$.get(urlC);});//这里添加promiseC的回调

varpromiseD = promiseC.then( function(){

return$.get(urlD);});//这里添加promiseD的回调

再来看看then函数中的构造源码,通过上面的实例分析,相信眼前的你会恍然大悟的

promise = { then:function( /*fnDone, fnFail, fnProgress*/) {varfns = arguments;//返回后的promise对象与newDefer对应returnjQuery.Deferred( function( newDefer ) { jQuery.each( tuples,function( i, tuple ) {varaction = tuple[ 0 ], fn= jQuery.isFunction( fns[ i ] ) && fns[ i ];//deferred[ done | fail | progress ] for forwarding actions to newDefer//为第一个递延对象添加回调deferred[ tuple[1] ]( function() {varreturned = fn && fn.apply( this, arguments );//如果回调返回的是一个递延对象,newDefer将根据这个返回的递延对象的状态来触发行为if( returned && jQuery.isFunction( returned.promise ) ) { returned.promise() .done( newDefer.resolve ) .fail( newDefer.reject ) .progress( newDefer.notify ); }//如果回调返回的不是一个递延对象,newDefer将根据第一个(deferred)递延对象的状态来触发行为else{ newDefer[ action+ "With" ]( this=== promise ? newDefer.promise() : this, fn ? [ returned ] : arguments ); } }); }); fns= null; }).promise(); }}

共同学习,共同进步。返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 中的 `$.when`,`done` 和 `then` 是一组用于处理异步操作的方法。 `$.when` 方法用于等待一个或多个异步操作完成。它接受任意数量的参数,每个参数都是一个需要等待的异步操作对象。当所有异步操作都完成时,`$.when` 返一个新的 Deferred 对象。 `done` 方法是 `Deferred` 对象的一个函数,它在 `$.when` 返的新的 Deferred 对象解决时被用。可以将一个或多个函数作为参数传给 `done` 方法。这些函数将在异步操作完成时执行,并且可以在函数内部访问异步操作的结果。 `then` 方法是 `Deferred` 对象的另一个函数,它在 `done` 方法用后执行。可以将一个或多个函数作为参数传给 `then` 方法。这些函数将在 `done` 方法函数执行后执行,并且也可以在函数内部访问异步操作的结果。 使用 `$.when`,`done` 和 `then` 方法的典型用例是处理多个异步操作的结果。我们可以在 `$.when` 中传入多个需要等待的异步操作对象,然后在 `done` 或 `then` 方法中分别处理每个异步操作的结果。这样可以确保当所有异步操作都完成时再执行后续的逻辑。 例如,我们可以使用以下代码处理两个异步操作的结果: ``` // 创建两个 Deferred 对象 var deferred1 = $.ajax({ url: 'url1', method: 'GET' }); var deferred2 = $.ajax({ url: 'url2', method: 'GET' }); // 等待两个异步操作完成 $.when(deferred1, deferred2).done(function(result1, result2) { // 处理异步操作的结果 console.log(result1); console.log(result2); }).then(function() { // 执行后续逻辑 console.log('All async operations completed.'); }); ``` 以上代码中,`deferred1` 和 `deferred2` 是两个异步操作对象,分别表示两个 AJAX 请求。我们使用 `$.when` 方法等待这两个异步操作完成,并在 `done` 方法中处理每个异步操作的结果。在 `then` 方法中可以执行其他的逻辑,如打印完成的消息。 总之,`$.when`,`done` 和 `then` 是 jQuery 提供的用于处理异步操作的方法,它们可以帮助我们更方便地管理和处理多个异步操作的结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值