首页 > 代码库 > 深入理解jQuery中的callback
深入理解jQuery中的callback
本文要讲的是jQuery.Callback() ，这是一个构造函数。在讲解这个之前，我们需要先讲讲javascript中的回调函数。
什么是回调？
所谓回调函数，我的理解：回头再调用，即：不是立刻运行，而是在特定时刻触发调用。
js中的同步和异步
在javascript中，回调函数和同步 异步有很深的渊源，所以我们先来理解一下在js中的同步和异步的概念：
同步： 后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
更确切的说：回调和异步有很深的渊源，js中的 事件 定时器 ajax animate等等都用到了回调函数。
为什么jQuery搞了个Callback()？
我们上面说到：js中的 事件 定时器 ajax animate等等都用到了回调函数，而且回调函数可能有多个。
我们来举个例子：
function a(arg){
console.log(‘吃饭‘ + arg)
}
function b(arg){
console.log(‘睡觉‘ + arg)
}
function c(arg){
console.log(‘打豆豆‘ + arg)
}
var xiaoming = setTimeout(function(){
a(‘ing‘);
b(‘ing‘);
c(‘ing‘);
},1000);
console.log(‘------------‘)我们在这里用定时器函数实现了异步，在一秒钟后(这句话并不准确，明白为啥不准确的同学们就不要在意这句话了，我是为了方便，不明白的请自行查阅setTimeout函数详解)运行a b c三个函数。
但是这里有个问题，a b c三个函数和小明耦合是不是有些深？ 小明现在每天是吃饭睡觉打豆豆，如果某天他不仅要吃饭睡觉打豆豆，还要学习的话，我们还得修改xiaoming的内部结构。 所以我们改进一下上面的格式：
function a(arg){ console.log(‘吃饭‘ + arg) } function b(arg){ console.log(‘睡觉‘ + arg) } function c(arg){ console.log(‘打豆豆‘ + arg) } function d(arg){ console.log(‘学习‘ + arg) } function callback(){ var list = []; var self = {}; self.add = function(thing){ list.push(thing) }; self.fire = function(arg){ for(var i in list){ list[i](arg) } }; return self } var xiaomingDo = callback(); xiaomingDo.add(a); xiaomingDo.add(b); xiaomingDo.add(c); xiaomingDo.add(d); var xiaoming = setTimeout(function(){ xiaomingDo.fire(‘ing‘); // 弱化耦合 },1000);
console.log(‘------------‘)
这样我们就弱化了耦合，将每天具体做的事从xiaoming中分离。
上例中的callback函数建立了一个用来保存函数的数组，最终返回了一个对象，这个对象具有两个方法：add 用来向数组中添加函数 ； fire 用来将数组中的函数全部执行。看到这里是不是感觉很熟悉？ 没错，这里采用了观察者模式。
再来个小红：
var xiaohongDo = callback(); xiaohongDo.add(a); xiaohongDo.add(b); var xiaohong = setTimeout(function(){ xiaohongDo.fire() },1000);
是不是感觉逻辑清晰很多。本例中的callback函数与jQuery中的Callback函数的作用以及实现原理是类似的。
jQuery.Callback()大体原理：
jQuery.Callback()需要在内部维护着一个存储函数的队列数组。
每当我们调用Callback时，都会返回一个新的对象。
使用这个对象的方法我们可以对队列数组进行操作。
当然jQuery.Callback()并不是我们想象的那么简单，他还提供了很多可供选择的参数：
once：保证数组内的函数只执行一遍
memory：保持以前的fire参数值，每当添加一个新的函数时，会将之前的fire参数值作为参数立即调用新函数
unique：确保数组中的函数无重复
stopOnFalse：当一个函数返回false时中断
源码：
jQuery.Callbacks = function( options ) { // Convert options from String-formatted to Object-formatted if needed // (we check in cache first) //通过字符串在optionsCache寻找有没有相应缓存，如果没有则创建一个，有则引用 //如果是对象则通过jQuery.extend深复制后赋给options。 options = typeof options === "string" ? ( optionsCache[ options ] || createOptions( options ) ) : jQuery.extend( {}, options ); var // Last fire value (for non-forgettable lists) memory, // 最后一次触发回调时传的参数 // Flag to know if list was already fired fired, // 列表中的函数是否已经回调至少一次 // Flag to know if list is currently firing firing, // 列表中的函数是否正在回调中 // First callback to fire (used internally by add and fireWith) firingStart, // 回调的起点 // End of the loop when firing firingLength, // 回调时的循环结尾 // Index of currently firing callback (modified by remove if needed) firingIndex, // 当前正在回调的函数索引 // Actual callback list list = [], // 回调函数列表 // Stack of fire calls for repeatable lists stack = !options.once && [],// 可重复的回调函数堆栈，用于控制触发回调时的参数列表 // Fire callbacks// 触发回调函数列表 fire = function( data ) { //如果参数memory为true，则记录data memory = options.memory && data; fired = true; //标记触发回调 firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; //标记正在触发回调 firing = true; for ( ; list && firingIndex < firingLength; firingIndex++ ) { if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) { // 阻止未来可能由于add所产生的回调 memory = false; // To prevent further calls using add break; //由于参数stopOnFalse为true，所以当有回调函数返回值为false时退出循环 } } //标记回调结束 firing = false; if ( list ) { if ( stack ) { if ( stack.length ) { //从堆栈头部取出，递归fire fire( stack.shift() ); } } else if ( memory ) {//否则，如果有记忆 list = []; } else {//再否则阻止回调列表中的回调 self.disable(); } } }, // Actual Callbacks object // 暴露在外的Callbacks对象,对外接口 self = { // Add a callback or a collection of callbacks to the list add: function() { // 回调列表中添加一个回调或回调的集合。 if ( list ) { // First, we save the current length //首先我们存储当前列表长度 var start = list.length; (function add( args ) { //jQuery.each，对args传进来的列表的每一个对象执行操作 jQuery.each( args, function( _, arg ) { var type = jQuery.type( arg ); if ( type === "function" ) { if ( !options.unique || !self.has( arg ) ) { //确保是否可以重复 list.push( arg ); } //如果是类数组或对象,递归 } else if ( arg && arg.length && type !== "string" ) { // Inspect recursively add( arg ); } }); })( arguments ); // Do we need to add the callbacks to the // current firing batch? // 如果回调列表中的回调正在执行时，其中的一个回调函数执行了Callbacks.add操作 // 上句话可以简称：如果在执行Callbacks.add操作的状态为firing时 // 那么需要更新firingLength值 if ( firing ) { firingLength = list.length; // With memory, if we‘re not firing then // we should call right away } else if ( memory ) { //如果options.memory为true，则将memory做为参数，应用最近增加的回调函数 firingStart = start; fire( memory ); } } return this; }, // Remove a callback from the list // 从函数列表中删除函数（集） remove: function() { if ( list ) { jQuery.each( arguments, function( _, arg ) { var index; // while循环的意义在于借助于强大的jQuery.inArray删除函数列表中相同的函数引用（没有设置unique的情况） // jQuery.inArray将每次返回查找到的元素的index作为自己的第三个参数继续进行查找，直到函数列表的尽头 // splice删除数组元素，修改数组的结构 while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) { list.splice( index, 1 ); // Handle firing indexes // 在函数列表处于firing状态时，最主要的就是维护firingLength和firgingIndex这两个值 // 保证fire时函数列表中的函数能够被正确执行（fire中的for循环需要这两个值 if ( firing ) { if ( index <= firingLength ) { firingLength--; } if ( index <= firingIndex ) { firingIndex--; } } } }); } return this; }, // Check if a given callback is in the list. // If no argument is given, return whether or not list has callbacks attached // 回调函数是否在列表中. has: function( fn ) { return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length ); }, // Remove all callbacks from the list // 从列表中删除所有回调函数 empty: function() { list = []; firingLength = 0; return this; }, // Have the list do nothing anymore // 禁用回调列表中的回调。 disable: function() { list = stack = memory = undefined; return this; }, // Is it disabled? // 列表中否被禁用 disabled: function() { return !list; }, // Lock the list in its current state // 锁定列表 lock: function() { stack = undefined; if ( !memory ) { self.disable(); } return this; }, // Is it locked? // 列表是否被锁 locked: function() { return !stack; }, // Call all callbacks with the given context and arguments // 以给定的上下文和参数调用所有回调函数 fireWith: function( context, args ) { if ( list && ( !fired || stack ) ) { args = args || []; args = [ context, args.slice ? args.slice() : args ]; //如果正在回调 if ( firing ) { //将参数推入堆栈，等待当前回调结束再调用 stack.push( args ); } else {//否则直接调用 fire( args ); } } return this; }, // Call all the callbacks with the given arguments // 以给定的参数调用所有回调函数 fire: function() { self.fireWith( this, arguments ); return this; }, // To know if the callbacks have already been called at least once // // 回调函数列表是否至少被调用一次 fired: function() { return !!fired; } }; return self;};复制代码
本文参考：http://www.cnblogs.com/aaronjs/p/3342344.html
深入理解jQuery中的callback
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。