js回调函数

js回调函数是个什么鬼？

一直感觉回调函数很牛逼的样子，但是一直弄不懂他是什么鬼？看了一本有一本**js书籍长篇大论也没看懂。然后一阵百度之后，在一个哥们的博客里发现了些似曾相识的东西，原来我之前已经写过回调函数的例子了。

来看一个例子：

//函数里的回调函数
function fun(call){
    //code
    if(call){//   判断是否传参
        call();// 调用call
    }
}

function cb(){
    console.log("调用了cd");
}

fun(cb);//结果：调用了cd"

函数传参可以传函数名！！（没有报错）

网友说，这个例子就是回调函数！！！我去，我之前经常这样写，我以为这是js存在的bug！

哦原谅我的年少无知，js真是神奇的语言！！

经过一番测试之后发现还有其他的写法：

//函数里的回调函数
function fun(call){
    //code
    if(call){//   判断是否传参
        call();// 调用call
    }
}
fun(function(){
    //code
    console.log("执行了回调函数");
});//结果：执行了回调函数

是不是很像jquery里的事件？（obj.onclick(function(){})；）

太爱js了，到此我们知道了在函数里回调函数的用法，那么对象里的有怎么用呢？

不急，用法差不多的，应为js是种神奇的语言，函数就是对象！

好的看我装逼：

//在对象里使用回调函数
function objtest(callback){
    //code
    if(callback){//判断是否传参
        callback();//调用callback回调函数
    }
}
//实例化对象
var obj=new objtest(function(){
    //code
    console.log("执行了回调函数");
});
//结果：执行了回调函数

当然，在对象成员方法里回调也是一样的：

//在对象里使用回调函数
function objtest(){
    //code
    //成员方法
    this.test=function(callback){
        if(callback){//判断是否传参
            callback();//调用callback回调函数
        }
    }
    
}
//实例化对象
var obj=new objtest();

obj.test(funciton(){
     console.log("执行了回调函数");
});
//结果：执行了回调函数

恩，就这样，是不是感觉js很奇怪？

哦，对了，不判断是否传参的话，在实例化（执行函数）时，如果不做回调处理的话会报错的

所以还是判断一下是否传参。

回调函数有什么用?

    对于这个问题，我只能说用到时自然有用，用不到时，即使再牛逼也是摆设！

恩，看看我的一个使用例子：

1. 监控div尺寸的对象(监控div尺寸的对象，当div宽高变化时自动调用回调函数，并传回相应宽高)

//监控盒子resize对象
jQuery.fn.resize=function(call){
	var that=$(this);
	var on=null;
	var data={
		"width":that.width(),
		"height":that.height(),
	}
	on=setInterval(function(){
		if(that.height()!=data.height||that.width()!=data.width){//宽高有变化时执行
			data.width=that.width();
			data.height=that.height();
			if(call)
			    call(data);//回调
		}
	},100);//刷新时间100毫秒
}

2.拖拽文件，如果存在文件数据时回调

/*
*	拖拽文件对象 Object
*	new dorp(obj,calbackfunction);
*	copyright by bluemoon
*	1752295326@qq.com
*	2015-1-9 11:56
*/
function dorpFile(obj,callback){
		this.obj=obj;
		this.obj.addEventListener("dragover",function(event){//
		event.stopPropagation();
		event.preventDefault();
		event.dataTransfer.dropEffect = 'copy';
		/*
		*preventDefault()	通知浏览器不要执行与事件关联的默认动作。
		*stopPropagation()	不再派发事件。
		*/
		},false);
		
		this.obj.addEventListener("drop",function(event){//释放拖拽触发事件
			event.stopPropagation();
			event.preventDefault();
			callback(event.dataTransfer.files);//回调函数，返回FileList
		},false);
}

恩，对于上面的例子我也不知道是否符合标准，既然浏览器没有报错，那我觉得用用没事。

对了，我有个问题：如何在对象里自定义事件呢？比如,ajax里的onload,onerror等事件。希望有这方面研究的朋友告诉下。

恩，谢谢。

转载于:https://my.oschina.net/u/2301005/blog/410975