js中回呼函數的學習筆記_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js中回呼函數的學習筆記_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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>

範例
//假如提供的資料來源是一整數,為某學生的分數,當num0時由高層處理.

//將下面這個函數拷貝下來存為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

java回调函数怎么写Jan 09, 2024 pm 02:24 PM

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

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

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

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

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

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

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

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

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

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

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

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

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