`
peter潘
  • 浏览: 10618 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

模拟jQuery.Deferred实现!

阅读更多
var _Deferred=function(){
	var callbacks=[],fired;
	var method={
		done:function(func){
			callbacks.push(func);
			if(fired){
				method.resolveWith(fired[0],fired[1]);
			}
			return this
		},
		resolveWith:function(context,args){
			args=args || [];
			fired=[context,args];
			while(callbacks[0]){
				callbacks.shift().apply(context,args);
			}
			return this;
		},
		resolve:function(){
			method.resolveWith(this,arguments);
			return this;
		}
	}
	return method;
}
	
var Deferred=function(){
	var doneDeferred=_Deferred(),failDeferred=_Deferred();	
	$.extend(doneDeferred,{
		reject:failDeferred.resolve,
		rejectWidth:failDeferred.resolveWith,
		fail:failDeferred.done,
		always:function(func){
			doneDeferred.done(func).fail(func);
		},
		promise:function(){
			return {
				done:doneDeferred.done,
				fail:doneDeferred.fail,
				always:doneDeferred.always,
				promise:doneDeferred.promise
			};
		}
	});
	return doneDeferred;
}

var when=function(deferredItem){
	var args=arguments,length=arguments.length,count=length;
	var deferred=(length<=1&&deferredItem&&deferredItem.promise)?deferredItem:Deferred();
	if(deferred!=deferredItem){
		var doneBack=function(i){
			return function(value){
				args[i]=arguments.length>1?[].slice.call(arguments,0):value;
				if(!(--count)){
					deferred.resolveWith(deferred,args);
				}
			}
		}
		for(var i=0;i<arguments.length;i++){
			if(arguments[i] && arguments[i].promise){
					arguments[i].done(doneBack(i)).fail(deferred.reject);
			}else{
				count--;
			}
		}
		if(!count){
			deferred.resolveWith(deferred,args);
		}
	}	
	return deferred.promise();
}	

//测试	
function wait(){
	var df=Deferred();
	setTimeout(function(){
		alert('end wait..');
		df.reject();
	},2000);
	return df.promise();
}
function wait2(){
	var df=Deferred();
	setTimeout(function(){
		df.resolve();
	},4000);
	return df.promise();
}
function f1(){
	alert('ttt');
}
when(wait(),wait2()).done(function(){
	f1();
});	


延迟对象jQuery.Deferred()设计思想:
1)函数队列,done与fail各维护一个!(抽离出来封装一个闭包)
3)done/fail的时候把新的函数放进对应的函数队列
3)resolve的时候循环shift并调用done函数队列;reject的时候循环shift并调用fail函数队列
4)利用标志变量fired存储resolve或reject的上下文和参数,可用于判断deferred是否已resolve或reject,以及传递上下文和参数!(这样一来,done/fail方法在resolve/reject后面执行也不怕了)
5)when方法:判断是否所有deferred已resolve的时候,很巧妙地利用了count记数法,resolve一个count减去1(此方法可用于许多其他场景)
分享到:
评论

相关推荐

    谈谈jQuery之Deferred源码剖析

    jQuery的Deferred对象是jQuery在ES6的Promise概念出现之前的一种实现,它允许开发者将异步操作的结果通过链式调用的方式处理,避免了传统的层层嵌套的回调函数的写法,让代码的可读性和可维护性更高。 - **Deferred...

    jQuery.deferred对象使用详解

    deferred对象是基于Promise接口的实现,它代表了一个将来可能完成的操作,并提供了管理回调函数的方法。 一、jQuery.deferred对象的创建与基本使用 创建一个deferred对象很简单,只需要通过$.Deferred()函数即可。...

    jQuery的deferred对象使用详解

    jQuery中的deferred对象是自jQuery 1.5.0版本引入的一种新特性,旨在解决JavaScript中异步操作的回调函数管理问题。deferred对象可以看作是一种特殊的对象,它允许你延迟到某个未来时刻执行某项操作。它是jQuery的回...

    jQuery中的deferred对象和extend方法详解

    jQuery中的`deferred对象`和`extend方法`是JavaScript异步编程的重要工具,尤其在处理AJAX请求和其他异步操作时非常有用。`deferred对象`是jQuery 1.5.0版本引入的,它提供了一种更优雅的方式来管理回调函数,解决了...

    认识jQuery的Promise的具体使用方法

    jQuery作为老牌的JavaScript库,提供了一套处理异步操作的机制,即Deferred对象与Promise模式的实现。接下来,我们将深入探讨jQuery中的Promise具体使用方法。 首先,要理解jQuery的Promise,需要先了解JavaScript...

    Deferred

    在JavaScript的Promise规范中,虽然没有直接的 Deferred 对象,但其功能可以通过 Promise 实现。比如,你可以创建一个 Promise 并使用`.resolve()`和`.reject()`来管理它的状态。 `deferred.js`可能包含了一个示例...

    基于jquery仿QQiPhone首页.rar

    【jQuery核心原理与应用】 jQuery是一款广泛应用于网页开发的JavaScript库,它的主要目标是简化JavaScript的DOM操作、事件处理、动画...同时,理解和使用jQuery的Promise或$.Deferred也是现代前端开发的重要技能之一。

    jquery基础教程之deferred对象使用方法

    在jQuery中,`deferred`对象是一个非常重要的概念,它主要用来处理异步操作和回调函数,提供了一种更优雅的方式来组织和管理异步代码。`deferred`对象的引入是为了增强jQuery对异步编程的支持,尤其是在处理多个异步...

    jquery中对于批量deferred的处理方法

    批量处理多个`deferred`对象时,我们可以利用`$.when()`函数来实现并发或顺序执行,并在所有操作完成后执行回调。本文将深入探讨jQuery中的批量`deferred`处理方法。 首先,让我们了解`$.Deferred()`和`$.when()`的...

    两款jQuery仿flash导航菜单.zip

    本资源"两款jQuery仿flash导航菜单.zip"包含的就是利用jQuery技术实现的,模拟传统Flash效果的导航菜单。Flash在过去的网页设计中常用于创建动态效果,但随着HTML5和CSS3的兴起,以及对移动设备的支持问题,jQuery...

    jquery仿IPad应用

    在Web开发领域,jQuery作为一个强大的JavaScript库,被广泛用于实现复杂的交互效果和动画。本教程将深入探讨如何使用jQuery来创建一个仿iPad的应用,旨在为用户提供与iPad类似的用户体验。我们将讨论以下几个关键...

    Jquery高级应用Deferred对象原理及使用实例

    `jQuery` 的 `Deferred` 对象是 `Promise` 的一个强大实现,它使得异步编程更加可控和可读,减少了回调函数的嵌套,提高了代码的可维护性。在实际项目中,熟练掌握 `Deferred` 对象的使用,能够有效地提升异步操作的...

    jquery多层遮罩图像浏览在相框中立体切换图像效果.zip

    标题 "jquery多层遮罩图像浏览在相框中立体切换图像效果.zip" 指的是一种使用 jQuery 实现的交互式图像浏览技术,它通过多层遮罩效果和立体切换来增强用户在相框内的图像浏览体验。这种效果通常用于图片画廊、产品...

    jQuery ready方法实现原理详解

    6. 在jQuery内部,还使用了jQuery.Deferred()对象来处理异步逻辑,当页面加载完成后,会调用Deferred对象的resolve方法来触发ready事件。 7. ready方法还涉及了readyWait和isReady两个变量来控制ready方法是否已经...

    jQuery源码分析系列_1.6

    1. **简介**:`Deferred`对象是jQuery中处理异步操作的关键,它可以跟踪异步操作的状态(pending、resolved或rejected),并且可以在状态改变时执行相应的回调函数。 2. **使用场景**:`Deferred`常用于Ajax请求、...

    deferred-unit-test:示例:在生命周期方法中使用延迟对象测试异步操作

    在jQuery中,`$.Deferred`对象是用来管理异步操作的一种工具,它提供了一种同步的方式去处理异步回调。一个`Deferred`对象有三种状态:pending(等待)、resolved(解决)和rejected(拒绝)。当`resolve()`或`...

    Twitter爱心点赞动画效果代码.zip

    "Twitter爱心点赞动画效果代码"是一个实现这种互动功能的实例,它利用了JavaScript库jQuery来创建一个模拟Twitter平台上的红心点赞功能。这个功能允许用户通过点击一个红心图标,不仅触发一个动态的爱心动画,同时还...

    Jquery $when done then的用法详解

    此外,文章中还介绍了$.Deferred(),它是jQuery提供的一种灵活的处理异步操作的工具。通过创建Deferred对象,开发者可以更细致地控制异步操作的各个阶段。文章中的asyncThing1(), asyncThing2(), asyncThing3()函数...

    jQuery使用deferreds串行多个ajax请求

    本篇文章将深入探讨如何使用jQuery的`deferred`对象和`$.when()`函数来实现这一目标。 首先,我们来看一下给定的标题和描述中的主要知识点: 1. **jQuery**:这是一个广泛使用的JavaScript库,简化了DOM操作、事件...

Global site tag (gtag.js) - Google Analytics