javascript的回调函数应用示例

前端技术 2023/09/06 JavaScript
回调函数概念：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。

JS Api 里这样解释：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

使用回调函数的原因：可以把调用者与被调用者分开。调用者不关心谁是被调用者，所有它需知道的，只是存在一个具有某种特定原型、某些限制条件（如返回值为int）的被调用函数。

考虑一个这样的例子:

假如某个项目的底层和高层是由不同的人员协同完成.底层负责数据的存取,高层负责数据的表示.当高层要用到某个模块的数据,于是他对底层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口.

底层的人员说:我给你提供数据,怎么展示和处理则是你的事情.我不可能为你每个需求都提供一个数据接口,我给你提供一个通过的接口.你得到数据,然后自己写函数去展示.由是经过协商,双方提供了一个这样的接口:
复制代码 代码如下:

//data表示底层提供的数据源,funcName表示高层的调用函数

function(data,funcName){

1.data属于情形1,由底层处理;

2.data属于情形2,由高层处理,怎么处理呢?利用高层提供的函数funcName处理

.....

}

我可能还没说清楚,我们看个例子一下子就明白了
复制代码 代码如下:

//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.

//将下面这个函数拷贝下来存盘为1.js

function f(num,callback){
if(num<0) {
alert(\"调用低层函数处理!\");
alert(\"分数不能为负,输入错误!\");
}else if(num==0){
alert(\"调用低层函数处理!\");
alert(\"该学生可能未参加考试！\");
}else{
alert(\"调用高层函数处理!\");
callback();
}
}

复制代码 代码如下:

//将下面这个test.html文件存盘与1.js在一个目录下：

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<script src=\"1.js\" type=\"text/javascript\"></script>
<title>无标题文档</title>
<script type=\"text/javascript\">
function test(){
var p=document.getElementById(\"pp\");
pp.innerText=\"\";
var num=document.getElementById(\"score\").value;
f(num,function(){ //匿名高层处理函数
if(num<60) alert(\"未及格！\");
else if(num<=90) alert(\"该生成绩优良！\");
else alert(\"该生成绩优秀!\"); })
pp.innerText=\"by since1978 qq558064!\"
}
</script>
</head>

<body>
<p>
回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。
</p>
请输入学生成绩<input type=\"text\" id=\"score\">
<input type=\"button\" onClick=\"test()\" value=\" 看看结果\">
<p id=\"pp\"></p>
</body>
</html>

运行此文件，可以看到效果

本文地址：https://www.stayed.cn/item/17098

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案