在前端开发过程中,经常会遇到一些操作callback,需要在某一个操作condition之后执行,而某一个操作condition又是耗时的,为了满足这样的需求,常用的做法就是前置操作完成了,再调用callback回调的方法。如下:

function callback(){
    console.log("callback");
function condition(){
    setTimeout(function(){
      callback();
   },1000);
condition();

如果有些前置条件过多,会形成回调地狱callback hell。

function condition(){
    setTimeout(function(){
      setTimeout(function(){
           setTimeout(function(){
                  callback();
           },1000);
      },1000)
   },1000);

这种写法很不优雅,代码可读性也很差。这里setTimeout()是模拟的一个异步操作,在实际开发中可能是一个ajax请求。

关于异步操作,在jQuery中,有解决办法,可以很好的解决这类问题,就是Deferred异步回调,这里需要结合promise,当前置条件执行完成了,就会触发后续的操作。示例如下:

$(function(){
	function d1(){
		var dtd = $.Deferred();
		console.log("d1 start");
		setTimeout(function(){
			console.log("1000 ms ");
			dtd.resolve();
		},1000);
		return dtd.promise();
	function callback(){
		console.log("callback...");
	$.when(d1()).done(function(){
		callback();

这里调用的结果如下所示:

通过jQuery的Deferred异步,可以保证,callback在耗时操作d1()之后执行。jQuery中Deferred异步写法大致思路是这样。

1、先申明一个dtd对象。var dtd = $.Deferred()

2、根据异步操作执行的结果,分别触发resolve(),reject()操作。

3、方法结束之前,返回dtd.promise()。

4、调用的时候,语法是$.when(d1()).done(callback()).fail(fail())。when中的条件就是我们的前置耗时操作,done中的函数是需要在前置条件之后执行的动作,如果前置条件执行出现异常reject()了,那么会执行fail()中的操作。

本例中d1()方法中书写了Deferred异步代码,他可以直接运行,如:d1(),完全不受任何影响,也可以结合$.when().done()运行,作为前置条件,执行成功了,触发后续操作。

这样,整个的异步就介绍完成了。思路也说明白了。

另外,这里$.when()中只写了一个前置条件,其实,$.when()可以传入多个异步操作,当所有的异步操作都执行完成了,再执行done()里面的操作。如下所示:

$(function(){
	function d1(){
		var dtd = $.Deferred();
		console.log("d1 start");
		setTimeout(function(){
			console.log("1000 ms ");
			dtd.resolve();
		},1000);
		return dtd.promise();
	function d2(){
		var dtd = $.Deferred();
		console.log("d2 start");
		setTimeout(function(){
			console.log("2000 ms ");
			dtd.resolve();
		},2000);
		return dtd.promise();
	function d3(){
		var dtd = $.Deferred();
		console.log("d3 start");
		setTimeout(function(){
			console.log("3000 ms ");
			dtd.resolve();
		},3000);
		return dtd.promise();
	function callback(){
		console.log("callback...");
	$.when(d1(),d2(),d3()).done(function(){
		callback();

运行结果如下: 

d1 start
d2 start
d3 start
1000 ms 
2000 ms 
3000 ms 
callback...

同样的,可以保证callback在耗时操作d1,d2,d3均完成之后,才开始执行。 

在前端开发过程中,经常会遇到一些操作callback,需要在某一个操作condition之后执行,而某一个操作condition又是耗时的,为了满足这样的需求,常用的做法就是前置操作完成了,再调用callback回调的方法。如下:function callback(){    console.log("callback");}function condition(){    setT...
一、什么是deferred对象 简单说,deferred对象就是jQuery函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。 deferred对象的最大优点,就是它把这一套函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用d...
学习过程: 大家可以看到,在上一节中我们实现一个ajax非常麻烦,所以现在很多框架都对ajax进行了封装,jquery是其中的一员,jquery是一个非常轻量级的框架,实用它实现ajax变得非常简单。 一、AJax方法介绍 jquery封装的ajax方法比较多,底层... *important 异步执行 参数方法 *参数 url1 请求目标url, paraObj 要传递的参数对象, fun 一个用于的function(){} *当请求成功后 会执行fun function ajaxDeferred(url1,paraObj,fun){ $.ajax({ url:url1, type:'post',
前言 最近学习jquery的$.post(),$.get(),$("#div1").load(),$.ajax()方法,发现确实很方便,但是对函数返值确不理解,后面自己做了几个实验,总结后把结论整理后和大家一起分享. 后台代码第一种情况,函数只有一个传入参数前端代码 输出的试结果 第二种情况,函数有两个传入参数前端代码 输出的试结果 第三种情况,函数有三个传入参数前端代码 一、deferred的功能及其使用 deferred的底层是基于callbacks实现的,建议再熟悉callbacks的内部机制前提下阅读这篇博客,如果需要了解callbacks可以参考:jQuery使用():Callbacks函数列表之异步编程(含源码分析) deferred.done() 向成功状态...
到目录 今天主要讲一下JQ中的异步编程,它将ajax进行封装,在进行异步请求时显得非常容易,无论是GET,POST方式,还是text,xml,javascript,json等数据通讯都是那么的自然 现在,我们就走入jq的ajax的殿堂吧。  GET请求获取数据 <script src="http://img1.c2cedu.com/Scripts/jquer...
jQuery常用的实用函数包括以下几种: 1. `$.ajax()`的函数:`success`、`error`、`complete`。用于处理Ajax请求成功、失败和完成时的函数。 2. `$.each()`的函数:接受两个参数,分别是索引和值,用于遍历数组或对象的每个元素时执行的函数。 3. `$.map()`的函数:接受两个参数,分别是索引和值,用于对数组或对象中的每个元素进行转换时执行的函数。 4. `$.when()`的函数:用于处理多个异步操作完成后执行的函数,可以通过`$.Deferred`对象来管理异步操作。 5. 动画方法的函数:例如`fadeIn()`、`fadeOut()`、`slideUp()`等方法,可以在动画完成之后执行的函数。 6. 事件处理函数的函数:例如`click()`、`change()`等方法,可以在事件触发时执行的函数。 以上是一些常见的jQuery实用函数,可以根据具体需求选择使用。