更多
更多

Javascript之回调函数callback

2018.02.01 chen7 js相关  热度 ℃

维基里对回调函数的解释:

在计算机程序设计中，回调函数，或简称回调（Callback 即call then back 被主函数调用运算后会返回主函数），是指通过函数参数传递到其它代码的，某一块可执行代码的引用。这一设计允许了底层代码调用在高层定义的子程序。

懵状……不怕~这里有一个通俗解释先读几遍:

你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。

在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。

道理是懂了，那还是用程序的语言再解释一遍吧：

因为function是一个内置函数，所以我们可以将function函数作为参数传递给另一个函数，这个被用作参数的函数我们称之为回调函数。我们也可以将回调函数的本质看作一种常见的问题解决模式，回调函数也可以被称为回调模式。

但实际情况还是不明所以然呐……不怕~我们来看几段代码：

1
2
3
4
//jQuery中常用的回调函数
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

平常我们经常用到的jQuery方法中，这里我们传递了一个函数给click方法的形参，click方法会调用我们传递给他的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a=[2,1,32,4];
function each(arr,callback){//回调函数作为each方法函数的参数
	for(var i=0;i<arr.length;i++){
		var item=arr[i];
		callback(item);//调用回调函数
	}
}
each(a,filter);
//以下是回调函数（作为参数在另一个函数中使用）
function filter(item){
	if(item<5){
		console.log(item);
	}
}
//=============================
//回调函数可以是匿名函数也可以是有名字的函数，以上是有名的函数方式（更清晰），也可以写成匿名函数
each(a,function(item){
	if(item<5){
		console.log(item);
	}
});

看上面的例子可以很清晰的看到使用回调函数的优点：

  • 插入新的代码逻辑时不需要改写原有的代码，只需要改回调函数；
  • 回调函数可以被多次调用，
  • 灵活，与原逻辑互不干扰；

理解与使用Javascript中的回调函数里对回调函数的原理使用也阐述得很详细值得品读。

感谢阅读
公众号