Studienhinweise zu Rückruffunktionen in js_javascript-Kenntnissen-js-Tutorial-php.cn

Studienhinweise zu Rückruffunktionen in js_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 16:40:39

Original

1115 Leute haben es durchsucht

Was ist eine Rückruffunktion? Vor dem Lernen wusste ich wirklich nicht, wie man die Rückruffunktion und ihre Funktion verwendet. In diesem Artikel werde ich den Schülern das Beispiel der Rückruffunktion vorstellen Wer mehr wissen möchte, kann hier nachschlagen.

Prinzip der Rückruffunktion:

Ich gehe jetzt und gebe dir Bescheid, wenn ich ankomme“
Dies ist ein asynchroner Prozess. Während des Prozesses „Ich gehe“ (Funktionsausführung), „Sie“ können Sie „Angekommen“ (Funktionsausführung abgeschlossen) und „Sie benachrichtigen“ (Rückruf) ausführen

Beispiel

1.Grundlegende Methode

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

Nach dem Login kopieren

Oder verwenden Sie ein anonymes Funktionsformular

<script language="javascript" type="text/javascript">
 function dosomething(damsg, callback){
  alert(damsg);
  if(typeof callback == "function") 
  callback();
 } 
dosomething("回调函数", function(){
  alert("和 jQuery 的 callbacks 形式一样!");
 }); 
</script>

Nach dem Login kopieren

2. Fortgeschrittene Methoden

Verwenden Sie die Aufrufmethode von Javascript

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

Nach dem Login kopieren

Parameter übergeben

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

Nach dem Login kopieren

Verwenden Sie Javascripts Apply, um Parameter zu übergeben

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

Nach dem Login kopieren

Beispiel

// Wenn die bereitgestellte Datenquelle eine Ganzzahl ist, also die Punktzahl eines bestimmten Schülers, wird sie bei num<=0 von der untersten Ebene verarbeitet, und wenn n>0, wird sie von der oberen Ebene verarbeitet Schicht.

//Kopieren Sie die folgende Funktion und speichern Sie sie als 1.js

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

Nach dem Login kopieren

//Speichern Sie die folgende test.html-Datei und 1.js im selben Verzeichnis:

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

Nach dem Login kopieren

Das Folgende sind die Ergänzungen anderer Internetnutzer:

Rückrufmodus in Javascript:

sieht aus wie:

function writeCode(callback){ 
   //执行一些事物， 
   callback(); 
   //... 
  } 
 
  function intrduceBugs(){ 
   //....引入漏洞 
  } 
 
writeCode(intrduceBugs);

Nach dem Login kopieren

Wir übergeben die Anwendung der Funktion an writeCode() und lassen writeCode sie zum passenden Zeitpunkt ausführen (wird nach der Rückkehr aufgerufen)

Schauen wir uns zunächst ein nicht so gutes Beispiel an (es wird später rekonstruiert):

//模拟查找页面中的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';});

Nach dem Login kopieren