js回调函数

最新推荐文章于 2023-06-05 03:52:59 发布

原创最新推荐文章于 2023-06-05 03:52:59 发布 · 6.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了jQuery中的回调函数概念及其应用场景，特别强调了动画效果完成后执行特定任务的重要性。通过实例展示了如何利用回调函数来确保代码按预期顺序执行。

这次在项目中遇到了不少jquery代码，之前没怎么用过，通过这次机会正好熟悉一下。

jquery可以理解为封装好的js代码，用起来很简洁，方便。重要说一下项目中遇到的回调函数。

因为函数和变量一样，可以一样被复制，删除，拷贝等。所以也可以把函数当做一个参数传入到另外一个函数中。回调函数可以这样定义：一个函数A被当做参数传入函数B中，并在B中执行A，那么A叫做B的回调函数。如果没有名称，则称作匿名回调函数。

先看一下jquery的回调函数：

jquery封装了很多动画函数，比如

$(selector).hide(speed,callback)

这就是一个隐藏的函数，隐藏之后想做一件事情的时候，就可以利用这个callback函数。

如果直接利用

$(selector).hide(speed)

在后面直接写后续的操作不行吗，为什么一定要用callback。如果这样操作，会在hide还未执行完毕的时候就会执行后面的操作。如果想在动画执行完毕后在执行相应的操作，那么必须使用回调函数。

从网上扒了一个关于js回调函数的小例子：写了一遍之后感觉对它的理解加深了一层。

HTML代码：

<!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>

js代码：

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

自己做一下小例子测试下吧。