Javascript中回调函数的学习笔记

回调函数原理:

我现在出发,到了通知你”
这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程

例子

 代码如下 复制代码

1.基本方法
<script language="javascript" type="text/javascript">
 
function doSomething(callback) {
// …
 
// Call the callback
callback('stuff', 'goes', 'here');
}
 
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
 
doSomething(foo);
 
</script>
 
或者用匿名函数的形式

<script language="javascript" type="text/javascript">
    function dosomething(damsg, callback){
        alert(damsg);
        if(typeof callback == "function")
        callback();
    }
 
dosomething("回调函数", function(){
        alert("和 jQuery 的 callbacks 形式一样!");
    });
 
 
</script>
 
2.高级方法
 
使用javascript的call方法
<script language="javascript" type="text/javascript">
 
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
 
function foo() {
alert(this.name);
}
 
var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Joe" via `foo`
 
</script>
 
传参数
<script language="javascript" type="text/javascript">
 
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
}
 
function foo(salutation) {
alert(salutation + " " + this.name);
}
 
var t = new Thing('Joe');
t.doSomething(foo, 'Hi');  // Alerts "Hi Joe" via `foo`
 
</script>
使用 javascript 的 apply 传参数
<script language="javascript" type="text/javascript">
 
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
}
 
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);
}
 
var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Hi Joe – 3 2 1" via `foo`
 
</script>

例子
//假如提供的数据源是一整数,为某学生的分数,当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>

时间: 2024-09-20 06:06:29

Javascript中回调函数的学习笔记的相关文章

js中回调函数的学习笔记_javascript技巧

回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

JavaScript高阶函数的学习笔记

在Javascript中,有高阶函数的概念,因而很适合函数式编程.那神马是高阶函数呢?没有神马具体的定义,但高阶函数有两个显著的特征:.用函数做参数或返回一个函数. 函数作为参数 众所周知,函数是Javascript中的一等公民,不仅能被赋值,也能和普通变量一样,作为函数的参数. 如果你有Javascript的Web编程经验或者是一个前端开发者,就会经常碰到回调函数.在某个操作完成之后会被执行的函数就被称为回调函数.通常,回调函数都是匿名的,并作为最后一个函数传递给调用者. 由于Javascri

javaScript中Blob对象的学习笔记

Blob表示二进制原始数据,一个Blob对象就是一个包含有只读原始数据的类文件对象. 继承Blob功能的API有: File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件: FileList对象:File对象的网页表单接口: FileReader对象:负责将二进制数据读入内存内容: URL对象:用于对二进制数据生成URL. 一. 创建Blob对象的方法 创建Blob对象的方法有三种,如下: 1)可以调用Blob构造函数. 2)还可以使用一个已有Blob对象上的slice()方法

JavaScript中自定义事件的学习笔记

在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了.那么,什么是js中的自定义事件呢?我们先来看一个例子: 前端开发员A封装了一个函数:  代码如下 复制代码 function move(){     alert(a);  //以此来代表N行代码 } 过段时间,前端开发员B要在A的基础上丰富这个函数,于是,他会这样写:  代码如下 复制代码 function move(){     alert(a); 

Javascript中switch case 语句学习笔记

在if条件语句中,逻辑条件只能有一个,如果有多个条件,可以使用嵌套的if语句来解决,但这种方法会增加程序的复杂度,降低程序的可读性. 使用switch流程控制语句可以完美地解决这些问题,其基本结构如下: switch语句语法  代码如下 复制代码 switch(条件表达式) {         case 常量:         {                 语句a;         }         case 常量:         {                 语句b;     

C语言中的函数指针学习笔记_C 语言

一.定义函数指针 return_type (*func_pointer)(parameter_list) 普通指针变量的定义 int * p; char * pointer; 类型的限定都在变量前面: 函数指针类型的限定是前后都有,前面是返回类型,后面是输入参数. 利用typedef 可以简化上面的表达方式. typedef return_type (*FunctionPointer) (parameter_list); FunctionPointer func_pointer; 这样是不是容易

重温JavaScript中的正则表达式 js学习笔记

一.创建正则表达式 创建正则表达式和创建字符串类似 , 创建正则表达式提供了两种方法 , 一种是采用 new运算符,另一个是采用字面量方式. 复制代码 代码如下: var dog = new RegExp('dog'); // 第一个参数字符串 var dog = new RegExp('dog', 'ig'); // 第二个参数可选模式修饰符 var dog = /dog/; var dog = /dog/ig; //字面量方式. RegExp 对象包含两个方法 : test() 和 exec

详解JavaScript的回调函数_javascript技巧

本文的目录: 什么是回调或高级函数 回调函数是如何实现的 实现回调函数的基本原则 回调地狱的问题和解决方案 实现自己的回调函数 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我

对js中回调函数的一些看法_javascript技巧

最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些