在前端开发过程中,经常会遇到一些操作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实用回调函数,可以根据具体需求选择使用。