jQuery之Callbacks函数功能测试

最新推荐文章于 2024-07-11 08:59:04 发布

原创最新推荐文章于 2024-07-11 08:59:04 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#callback #javascript #jquery #函数

大前端专栏收录该内容

77 篇文章

订阅专栏

本文介绍jQuery的Callbacks对象，包括创建方法、支持的操作如添加、删除、触发等，并通过实例展示了不同参数配置的效果，如once、memory等。

一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。

1.创建Callbacks函数

var callbacks=$.Callbacks();
//下面四个参数可以两两组合once、memory、unique、stopOnFalse
var callbacks = $.Callbacks( "once" );
var callbacks = $.Callbacks( "memory" );
var callbacks = $.Callbacks( "unique" );
var callbacks = $.Callbacks( "stopOnFalse");
var callbacks = $.Callbacks( "unique memory" );

2.Callbacks对象支持的方法

callbacks.add(fn1);//添加回调函数
callbacks.remove(fn1);//删除回调函数
callbacks.fire("args111");//传递参数触发回调函数
callbacks.fireWith({name:"xiaoming"},['args11']);//改变上下文触发回调函数
callbacks.empty();//清空回调函数列表
callbacks.disable();//禁用回调函数,以后都不能再使用
callbacks.has(fn1);//判断回调函数列表中是否存在函数fn1
callbacks.fired();//判断这个回调函数是否回调过

3.测试简单的回调函数


function fn1(val){
		console.log("fn1:"+val);
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	function fn3(val){
		console.log("fn3:"+val);
	}
	
	var callbacks=$.Callbacks();
	callbacks.add(fn1);
	callbacks.fire("111");
	//fn1:111
	callbacks.add(fn2);	
	callbacks.fire("222");
	//fn1:222
	//fn2:222
	callbacks.add(fn3);	
	callbacks.fire("333");
	//fn1:333
	//fn2:333
	//fn3:333
	callbacks.remove(fn1);
	callbacks.fire("444");
	//fn2:444
	//fn3:444
	callbacks.empty();
	callbacks.fire("555");
	//无输出
	callbacks.add(fn1);	
	callbacks.fire("666");
	//fn1:666
	callbacks.disable();//禁用了的回调列表不能再恢复使用
	callbacks.fire("777");
	//无输出
	callbacks.add(fn2);
	callbacks.fire("888");
	//无输出

4.测试只能触发一次的回调函数


function fn1(val){
		console.log("fn1:"+val);
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	function fn3(val){
		console.log("fn3:"+val);
	}
	
	var callbacks=$.Callbacks("once");
	callbacks.add(fn1);
	callbacks.fire("111");
	//fn1:111
	callbacks.add(fn2);
	callbacks.fire("222");
	//无输出

5.测试可以记录上次触发过程并且在新添加回调函数后直接触发


function fn1(val){
		console.log("fn1:"+val);
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	function fn3(val){
		console.log("fn3:"+val);
	}
	
	var callbacks=$.Callbacks("memory");
	callbacks.add(fn1);
	callbacks.fire("111");
	//fn1:111
	callbacks.add(fn2);
	//fn2:111
	callbacks.fire("222");
	//fn1:222
	//fn2:222

6.测试只能触发一次并且记录上次触发过程的回调函数


function fn1(val){
		console.log("fn1:"+val);
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	function fn3(val){
		console.log("fn3:"+val);
	}
	
	var callbacks=$.Callbacks("once memory");
	callbacks.add(fn1);
	callbacks.fire("111");
	//fn1:111
	callbacks.add(fn2);
	//fn2:111
	callbacks.fire("222");
	//无输出

7.测试列表中不存在重复函数的回调函数


function fn1(val){
		console.log("fn1:"+val);
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	function fn3(val){
		console.log("fn3:"+val);
	}
	
	var call=$.Callbacks();
	var callbacks=$.Callbacks("unique");
	call.add(fn1);
	callbacks.add(fn1);
	call.fire("111");
	//fn1:111
	callbacks.fire("111");
	//fn1:111
	call.add(fn1);
	callbacks.add(fn1);
	call.fire("222");
	//fn1:222
	//fn1:222
	callbacks.fire("222");
	//fn1:222

8.测试列表中上一条函数影响到下一个回调函数的设置


function fn1(val){
		console.log("fn1:"+val);
		if(val=="111"){
			return true;
		}
		return false;
	}
	function fn2(val){
		console.log("fn2:"+val);
	}
	var callbacks=$.Callbacks("stopOnFalse");
	callbacks.add(fn1);
	callbacks.add(fn2);
	callbacks.fire("111");
	//fn1:111
	//fn2:111
	callbacks.fire("222");
	//fn1:111