您的位置：首页 > Web前端 > JavaScript

javascript 回调函数

2016-08-10 12:03 267 查看

含义：

回调基本原理跟好莱坞原则一样，Don’t call me,I’ll call you。

编程上来说，一般使用一个库或类时，是你主动调用人家的API，这个叫Call，有的时候这样不能满足需要，需要你注册你自己的程序（比如一个对象)，然后让人家在合适的时候来调用你，这叫Callback。设计模式中的Observer就是例子。基于事件的编程方式，那些事件的处理程序都是被调用的方法，都可成为回调(Callback)方法。

回调函数就是把一个方法b/c，当做另一个方法的main的参数传进去，在某一个时刻，方法b/c会被方法main调用执行。

举例:1 不带参数的回调函数

<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<script type="text/javascript">
function main(callback) {
alert("I am main function");
alert("Invoke callback function");
callback();
}

function b() {
alert("I am b function");
}

function c() {
alert("I am c function");
}

function test() {
main(b);
main(c);
}
</script>

<button onclick="test()">click me</button>
</body>
</html>

举例:2 带参数的回调函数

<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<script type="text/javascript">
function main(p1,p2,callback) {
alert("I am main function");
alert("Invoke callback function");
callback((p1+p2));
}

function b(data) {
alert("I am b function param is : " + data);
}

function c(data) {
alert("I am c function param is : " + data);
}

</script>

<button onclick="main(1,5,b)">click me b</button>
<button onclick="main(1,6,c)">click me c</button>
</body>
</html>

3.常见的回到函数

<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<button id="btn_1">click me</button>
<script type="text/javascript">
// jquery 中的回调函数
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
// javascript 回调函数
var friends = ["Mike", "Stacy", "Andy", "Rick"];
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
</script>
</body>
</html>

4.回调函数的实际应用举例

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<input type="text" id='score'/>
<button onclick="testCallBack('score',punish)">测试回调函数</button>

<script type="text/javascript">
function testCallBack(id, callBack) {
var score = getValue(id);
if(score > 60) {
alert("考试通过可以回家了!");
} else {
// 执行之前确保回调函数是函数
if(typeof callBack ==="function") {
callBack(score);
} else {
alert("请传入函数作为参数！")
}
}
}

/**
* 获取指定 id input 值
* @param id
*/
function getValue(id) {
return document.getElementById(id).value;
}

/**
* 处理不及格的人的方式
* @param score
*/
function punish(score) {
if(score > 50) {
alert("把考试内容抄写一遍！")
} else if(score > 40) {
alert("把考试内容抄写两边遍！")
} else {
alert("叫家长！")
}
}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航