首页 web前端 js教程 js中回调函数的学习笔记_javascript技巧

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

May 16, 2016 pm 04:40 PM
回调函数

回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考。

回调函数原理:

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

例子

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>

登录后复制

下面是其它网友的补充:

javascript中的回调模式:

形如:

function writeCode(callback){ 
   //执行一些事物, 
   callback(); 
   //... 
  } 
 
  function intrduceBugs(){ 
   //....引入漏洞 
  } 
 
writeCode(intrduceBugs); 
登录后复制

我们传递函数的应用给writeCode(),让writeCode在适当的时候来执行它(返回以后调用)

先看一个不怎么好的例子(后续要对其重构):

//模拟查找页面中的dom节点,将查找到的节点存在数组里面统一返回 
  //此函数只用于查找不对dom节点做任何的逻辑处理 
  var findNodes = function(){ 
   var i = 100000;//大量的循环, 
   var nodes = [];//用于存储找到的dom节点 
   var found; 
   while(i){ 
    i -=1; 
    nodes.push(found); 
   } 
   return nodes; 
  } 
 
  //将查找找到的dom节点全部隐藏 
  var hide = function(nodes){ 
   var i = 0, 
    max = nodes.length; 
   for(;i<max;i++){ 
//findNodes后面有括号代表立即执行,先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ; 
nodes[i].style.display="none"
}

上面的方法是低效的,以为hide()必须再次遍历有findNodes()返回的数组节点,如何避免这种多余的循环呢。 
  我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了),那么他就不再是一个通用函数了。 
  解决方法是用回调模式,可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数 
   var findNodes = fucntion(callback){ 
    var i = 100000, 
     nodes = [], 
     found; 
    //检查回调函数是否可用调用的 
    if(typeof callback !== 'function'){ 
     callback = false; 
    } 
    while(i){ 
     i -= 1; 
     if(callback){ 
      callback(found); 
     } 
     nodes.push(found); 
    } 
    return nodes; 
   } 
 
   //回调函数 
   var hide = function(node){ 
    node.style.display = 'none '; 
   } 
   //找到后续节点并在后续执行中对其进行隐藏 
 findNodes(hide);//先执行findNodes然后执行hide,当然回调函数也可以在调用主函数时创建:findNodes(function(node){node.style.display = 'none';});
登录后复制
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
java回调函数怎么写 java回调函数怎么写 Jan 09, 2024 pm 02:24 PM

java回调函数的写法有:1、接口回调,定义一个接口,其中包含一个回调方法,在需要触发回调的地方,使用该接口作为参数,并在合适的时机调用回调方法;2、匿名内部类回调,可以使用匿名内部类来实现回调函数,避免创建额外的实现类;3、Lambda表达式回调,在Java 8及以上版本中,可以使用Lambda表达式来简化回调函数的写法等。

Java中回调函数的基本语法与应用 Java中回调函数的基本语法与应用 Jan 30, 2024 am 08:12 AM

Java回调函数的基本写法和使用方法引言:在Java编程中,回调函数是一种常见的编程模式,通过回调函数,可以将某个方法作为参数传递给另一个方法,从而实现方法的间接调用。回调函数的使用,在事件驱动、异步编程和接口实现等场景中非常常见。本文将介绍Java回调函数的基本写法和使用方法,并提供具体的代码示例。一、回调函数的定义回调函数是一种特殊的函数,它可以作为参数

分析常见的Python回调函数应用场景 分析常见的Python回调函数应用场景 Feb 02, 2024 pm 09:34 PM

Python中常见的回调函数应用场景分析,需要具体代码示例回调函数是指在编程中,将一个函数作为参数传递给另一个函数,并在某个特定的事件发生时执行这个参数函数。回调函数广泛应用于异步编程、事件处理、GUI编程等领域。本文将分析Python中常见的回调函数应用场景,并给出相关的具体代码示例。异步编程在异步编程中,回调函数常用于处理异步任务的结果。当需要执行一个耗

Vue组件通信:使用回调函数进行组件通信 Vue组件通信:使用回调函数进行组件通信 Jul 09, 2023 pm 07:42 PM

Vue组件通信:使用回调函数进行组件通信在Vue应用程序中,有时候我们需要让不同的组件之间进行通信,以便它们可以共享信息和相互协作。Vue提供了多种方式来实现组件之间的通信,其中一种常用的方式是使用回调函数。回调函数是一种将一个函数作为参数传递给另一个函数并在特定事件发生时被调用的机制。在Vue中,我们可以利用回调函数来实现组件之间的通信,使得一个组件可以在

如何在 Golang 中使用数据库回调函数? 如何在 Golang 中使用数据库回调函数? Jun 03, 2024 pm 02:20 PM

在Golang中使用数据库回调函数可以实现:在指定数据库操作完成后执行自定义代码。通过单独的函数添加自定义行为,无需编写额外代码。回调函数可用于插入、更新、删除和查询操作。必须使用sql.Exec、sql.QueryRow或sql.Query函数才能使用回调函数。

事件驱动编程中Java回调函数的应用领域 事件驱动编程中Java回调函数的应用领域 Feb 01, 2024 am 09:07 AM

Java回调函数在事件驱动编程中的应用回调函数简介回调函数(callbackfunction)是一种在某个事件或操作发生后被调用的函数。它通常用于事件驱动编程中,其中程序在等待事件发生时会阻塞。当事件发生时,回调函数就会被调用,程序就可以继续执行。在Java中,回调函数可以通过接口或匿名内部类来实现。接口是一种定义函数签名的机制,它允许一个类实现另一个类的

深入解析JavaScript中的回调函数(同步和异步) 深入解析JavaScript中的回调函数(同步和异步) Aug 04, 2022 am 10:05 AM

回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。

深入研究Java回调函数的实例应用技巧 深入研究Java回调函数的实例应用技巧 Feb 01, 2024 am 09:29 AM

Java回调函数的妙用技巧回调函数是一种编程模式,允许一个函数将控制权交回给另一个函数,并在另一个函数完成任务后继续执行。这在需要异步处理任务或处理事件时非常有用。Java中可以使用匿名内部类、lambda表达式或函数式接口来实现回调函数。匿名内部类匿名内部类是一种无名的内部类,它没有名称,只能在创建它的类中使用。匿名内部类可以实现接口或扩展类,并且可以重写

See all articles