Heim Web-Frontend js-Tutorial Sagen Sie mir, was die Rückruffunktion von Javascript ist_Grundkenntnisse

Sagen Sie mir, was die Rückruffunktion von Javascript ist_Grundkenntnisse

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

 Funktionen sind auch Objekte

Wenn Sie die Rückruffunktion verstehen möchten, müssen Sie zunächst die Regeln der Funktion klar verstehen. In JavaScript sind Funktionen seltsam, aber sie sind tatsächlich Objekte. Genauer gesagt ist eine Funktion ein Funktionsobjekt, das mit dem Function()-Konstruktor erstellt wurde. Das Function-Objekt enthält eine Zeichenfolge, die den JavaScript-Code der Funktion enthält. Wenn Sie von C oder Java kommen, mag das seltsam erscheinen. Wie kann der Code eine Zeichenfolge sein? Bei Javascript ist dies jedoch an der Tagesordnung. Die Unterscheidung zwischen Daten und Code ist fließend.

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3); //6 
Nach dem Login kopieren

Ein Vorteil dieser Vorgehensweise besteht darin, dass Sie Code an andere Funktionen oder reguläre Variablen oder Objekte übergeben können (da Code buchstäblich nur ein Objekt ist).

 Funktion als Rückruf übergeben

Es ist einfach, eine Funktion als Parameter zu übergeben.

function fn(arg1, arg2, callback){
 var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
 callback(num);  //传递结果
}

fn(10, 20, function(num){
 console.log("Callback called! Num: " + num); 
});    //结果为10和20之间的随机数 
Nach dem Login kopieren

Vielleicht erscheint das umständlich oder sogar etwas dumm. Warum geben Sie die Ergebnisse nicht normal zurück? Aber wenn Sie eine Rückruffunktion verwenden müssen, denken Sie vielleicht nicht daran!

Gehen Sie uns aus dem Weg

Herkömmliche Funktionen geben Daten in Form von Parametern ein und verwenden Rückgabeanweisungen, um Werte zurückzugeben. Theoretisch gibt es am Ende der Funktion eine Return-Anweisung, die strukturell aus einem Eingabepunkt und einem Ausgabepunkt besteht. Dies ist einfacher zu verstehen. Eine Funktion ist im Wesentlichen eine Abbildung des Implementierungsprozesses zwischen Eingabe und Ausgabe.

Wenn der Funktionsimplementierungsprozess jedoch sehr lang ist, möchten Sie dann warten, bis die Funktion die Verarbeitung abgeschlossen hat, oder eine Rückruffunktion für die asynchrone Verarbeitung verwenden? In diesem Fall ist es wichtig, Callback-Funktionen zu verwenden, zum Beispiel: AJAX-Anfragen. Wenn Sie zur Verarbeitung eine Callback-Funktion verwenden, kann der Code weiterhin andere Aufgaben ausführen, ohne vergeblich warten zu müssen. In der tatsächlichen Entwicklung werden in JavaScript häufig asynchrone Aufrufe verwendet, und dies wird hier sogar dringend empfohlen!

Nachfolgend finden Sie ein umfassenderes Beispiel für die Verwendung von AJAX zum Laden einer XML-Datei und die Verwendung der Funktion call() zum Aufrufen der Rückruffunktion im Kontext des angeforderten Objekts.

function fn(url, callback){
 var httpRequest;    //创建XHR
 httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :   //针对IE进行功能性检测
    window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
 
 httpRequest.onreadystatechange = function(){
  if(httpRequest.readystate === 4 && httpRequest.status === 200){  //状态判断
   callback.call(httpRequest.responseXML); 
  }
 };
 httpRequest.open("GET", url);
 httpRequest.send();
}

fn("text.xml", function(){    //调用函数
 console.log(this);   //此语句后输出
});

console.log("this will run before the above callback.");  //此语句先输出 
Nach dem Login kopieren

Wir fordern eine asynchrone Verarbeitung an. Das heißt, wenn wir die Anfrage starten, weisen wir sie an, unsere Funktion aufzurufen, wenn sie abgeschlossen ist. In tatsächlichen Situationen muss der Ereignishandler onreadystatechange auch die Situation eines Anforderungsfehlers berücksichtigen. Hier gehen wir davon aus, dass die XML-Datei vorhanden ist und vom Browser erfolgreich geladen werden kann. In diesem Beispiel ist die asynchrone Funktion dem Ereignis onreadystatechange zugewiesen und wird daher nicht sofort ausgeführt.

Schließlich wird die zweite console.log-Anweisung zuerst ausgeführt, da die Rückruffunktion erst ausgeführt wird, wenn die Anforderung abgeschlossen ist.

Das obige Beispiel ist nicht leicht zu verstehen, schauen Sie sich also das folgende Beispiel an:

 
function foo(){
 var a = 10;
 return function(){
  a *= 2;
  return a;  
 }; 
}
var f = foo();
f(); //return 20.
f(); //return 40. 
Nach dem Login kopieren

  函数在外部调用,依然可以访问变量a。这都是因为javascript中的作用域是词法性的。函数式运行在定义它们的作用域中(上述例子中的foo内部的作用域),而不是运行此函数的作用域中。只要f被定义在foo中,它就可以访问foo中定义的所有的变量,即便是foo的执行已经结束。因为它的作用域会被保存下来,但也只有返回的那个函数才可以访问这个保存下来的作用域。返回一个内嵌匿名函数是创建闭包最常用的手段。

回调是什么?

看维基的 Callback_(computer_programming) 条目:

In computer programming, a callback is a reference to a piece of executable code that is passed as an argument to other code.

jQuery文档How jQuery Works#Callback_and_Functio...条目:

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

百科:回调函数

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

因此,回调本质上是一种设计模式,并且jQuery(包括其他框架)的设计原则遵循了这个模式。

在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

例子
一个同步(阻塞)中使用回调的例子,目的是在func1代码执行完成后执行func2。

var func1=function(callback){
  //do something.
  (callback && typeof(callback) === "function") && callback();
}

func1(func2);
  var func2=function(){
}
Nach dem Login kopieren


异步回调的例子:

$(document).ready(callback);

$.ajax({
 url: "test.html",
 context: document.body
}).done(function() { 
 $(this).addClass("done");
}).fail(function() { alert("error");
}).always(function() { alert("complete"); 
});
/**
注意的是,ajax请求确实是异步的,不过这请求是由浏览器新开一个线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。*/

Nach dem Login kopieren

回调什么时候执行

回调函数,一般在同步情境下是最后执行的,而在异步情境下有可能不执行,因为事件没有被触发或者条件不满足。

回调函数的使用场合

资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,AJAX等等。
DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。

setTimeout的延迟时间为0,这个hack经常被用到,settimeout调用的函数其实就是一个callback的体现

链式调用:链式调用的时候,在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeout及setInterval的意义了,所以用return已经没有意义,只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

回调函数的传递

上面说了,要将函数引用或者函数表达式作为参数传递。

$.get('myhtmlpage.html', myCallBack);//这是对的
$.get('myhtmlpage.html', myCallBack('foo', 'bar'));//这是错的,那么要带参数呢?
$.get('myhtmlpage.html', function(){//带参数的使用函数表达式
myCallBack('foo', 'bar');
});
Nach dem Login kopieren


另外,最好保证回调存在且必须是函数引用或者函数表达式:
(callback && typeof(callback) === "function") && callback();

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So schreiben Sie eine Java-Callback-Funktion So schreiben Sie eine Java-Callback-Funktion Jan 09, 2024 pm 02:24 PM

Die Schreibmethoden der Java-Rückruffunktion sind: 1. Schnittstellenrückruf: Definieren Sie eine Schnittstelle, die eine Rückrufmethode enthält, verwenden Sie die Schnittstelle als Parameter, an dem der Rückruf ausgelöst werden muss, und rufen Sie die Rückrufmethode zum entsprechenden Zeitpunkt auf. Anonymer innerer Klassenrückruf: Sie können anonyme innere Klassen verwenden, um Rückruffunktionen zu implementieren, um die Erstellung zusätzlicher Implementierungsklassen zu vermeiden. 3. Lambda-Ausdrucksrückrufe In Java 8 und höher können Sie Lambda-Ausdrücke verwenden, um das Schreiben von Rückruffunktionen zu vereinfachen.

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Grundlegende Syntax und Anwendung von Callback-Funktionen in Java Grundlegende Syntax und Anwendung von Callback-Funktionen in Java Jan 30, 2024 am 08:12 AM

Einführung in das grundlegende Schreiben und Verwenden von Java-Rückruffunktionen: In der Java-Programmierung ist die Rückruffunktion ein gängiges Programmiermuster. Durch die Rückruffunktion kann eine Methode als Parameter an eine andere Methode übergeben werden, wodurch ein indirekter Aufruf der Methode erreicht wird. Die Verwendung von Rückruffunktionen ist in Szenarien wie der ereignisgesteuerten, asynchronen Programmierung und Schnittstellenimplementierung sehr verbreitet. In diesem Artikel wird das grundlegende Schreiben und Verwenden von Java-Rückruffunktionen vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Definition der Callback-Funktion Eine Callback-Funktion ist eine spezielle Funktion, die als Parameter verwendet werden kann

See all articles