Heim > Web-Frontend > js-Tutorial > Hauptteil

Eingehende Analyse der Rückruffunktionen in js (detaillierte Erklärungsfreigabe)

奋力向前
Freigeben: 2021-09-17 10:53:09
nach vorne
2224 Leute haben es durchsucht

Im vorherigen Artikel „Ein Artikel zur Erläuterung des Zeigeproblems in js (mit Code) “ habe ich Ihnen das Zeigeproblem in js vorgestellt. Der folgende Artikel gibt Ihnen eine detaillierte Erklärung der Rückruffunktion in js. Schauen Sie sich das an.

Eingehende Analyse der Rückruffunktionen in js (detaillierte Erklärungsfreigabe)

Detaillierte Erklärung der JS-Rückruffunktion

JS-Rückruffunktion

Was ist eine Rückruffunktion? Wenn das Programm ausgeführt wird, ruft das Anwendungsprogramm unter normalen Umständen häufig die Bibliothek über die API auf vorgefertigte Funktionen. Bei einigen Bibliotheksfunktionen muss die Anwendung jedoch zuerst eine Funktion übergeben, damit sie zum richtigen Zeitpunkt aufgerufen werden kann, um die Zielaufgabe abzuschließen. Die Funktion, die übergeben und später aufgerufen wird, wird als Rückruffunktion bezeichnet.

Übergeben Sie normalerweise eine Funktion B an eine andere Funktion A und rufen Sie bei Bedarf Funktion A auf. B传入另一个函数A,并且在 需要的时候再调用函数A。

说白了,回调就是回溯,先定义好将要使用的函数体,然后在使用使再调用这个函数,我们通常把callback作为一个参数传入先定义的那个函数。下面我们先来看一段jquery代码:

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
Nach dem Login kopieren

上面jquery就是一个回调函数,首先它在执行完hide效果后,接着调用function回调函数。

我们再来看一段JS代码,看看回调函数是如何实现的:

function Buy(name,goods1,callback) {
    alert(name+' buy '+goods1);
    if(callback&&typeof(callback)==="function")
        callback();
}
Buy('xiaoming','apple',function(){
    alert("shopping finish");
});
Nach dem Login kopieren

一个很简单的代码,一开始不知道要买啥,等到买到东西,立即把之前定义好的函数调用出来,最好加上判断规则,因为一切前提是callback必须是一个函数,输出结果为:

xiaoming buy apple
shopping finish
Nach dem Login kopieren

闭包与回调

下面看一道闭包的题目,分别点击第一个和第四个节点,执行结果:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener(&#39;click&#39;, function() {
        console.log(&#39;You clicked element #&#39; + i);
   });
}
Nach dem Login kopieren

这里虽然主要考的是闭包,addEventListener是一个闭包,而匿名函数是一个回调函数,i是在闭包中的变量。在addEventListener的回调执行时,循环已经结束,此时的变量i被赋值为node.lengthnode.length为总节点数。所以结果就是

You clicked element # node.length
Nach dem Login kopieren

那要怎么改,将其返回值改成函数,既然i变量的值会被释放,那我们就引入i,让每次循环的值都保存在内存中,就可以了:

var nodes = document.getElementsByTagName(&#39;button&#39;);
for (var i = 0; i < nodes.length; i++) {
(function(i) {
    nodes[i].addEventListener(&#39;click&#39;, function () {
        console.log(&#39;You clicked element #&#39; + i);
        })
       })(i);
}
Nach dem Login kopieren

PHP回调函数

下面略说一下php中回调函数如何实现(结果为1,2,3,4):

<?php
    $array=array(1,2,3,4);
    array_walk($array,function($value){
        echo $value;});
?>
Nach dem Login kopieren

php对每个传入的数组元素作回调处理,下面再看看php的闭包,使用use

Um es ganz klar auszudrücken: Callback ist ein Backtracking. Definieren Sie zuerst den zu verwendenden Funktionskörper und rufen Sie diese Funktion dann nach der Verwendung auf. Normalerweise übergeben wir callback als Parameter an die zuerst definierte Funktion. Schauen wir uns zunächst einen Teil des jquery-Codes an:

<?php
    function getcouter(){
        $i=0
        return function() use($i)(
            echo $i;
        )};
    }
    $counter=getcounter();
    echo $counter();
    echo $counter();
?>
Nach dem Login kopieren

Die obige Jquery ist eine Rückruffunktion. Nach der Ausführung des hide-Effekts ruft sie dann die Funktion auf </ code> Rückruffunktion. <p></p>Schauen wir uns noch einmal einen Teil des JS-Codes an, um zu sehen, wie die Rückruffunktion implementiert ist: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">1,1</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>Ein sehr einfacher Code, wenn ich am Anfang etwas kaufe Die zuvor definierte Funktion. Schließlich ist es gut, Beurteilungsregeln hinzuzufügen, da die Prämisse lautet, dass <code>callback eine Funktion sein muss und das Ausgabeergebnis lautet:

class hello {
function callback($a,$b) {
echo "$a,$b";
}
static function callback($c,$d){
echo "$c,$d";        
}
}
//将类名作为参数
call_user_func(array(&#39;hello&#39;,&#39;callback&#39;),"hello","world");
//输出 hello,world
//将对象作为参数
call_user_func(array(new hello(),&#39;callback&#39;),"hello","world");
//将静态方法作为参数
call_user_func(hello::callback,"hello","world");
//输出 hello,world
Nach dem Login kopieren
Abschluss und Rückruf🎜🎜Schauen wir uns an Klicken Sie bei einer Frage zum Abschluss auf den ersten bzw. vierten Knoten. Ausführungsergebnis: 🎜rrreee🎜Obwohl der Haupttest hier der Abschluss ist, ist addEventListener ein Abschluss und die anonyme Funktion ein Rückruf Funktion, i ist in der Abschlussvariablen. Wenn der Rückruf von addEventListener ausgeführt wird, ist die Schleife beendet. Der Variablen i wird zu diesem Zeitpunkt der Wert von node.length und node.length ist die Gesamtknotennummer. Das Ergebnis ist also: 🎜rrree🎜Wie ändert man den Rückgabewert in eine Funktion? Da der Wert der i-Variablen freigegeben wird, führen wir <code>i ein, sodass der Wert jeder Schleife wird im Speicher gespeichert, das ist es: 🎜rrreee🎜PHP-Rückruffunktion🎜🎜Lassen Sie uns kurz darüber sprechen, wie die Rückruffunktion in PHP implementiert wird (Ergebnisse sind 1, 2, 3, 4): 🎜rrreee🎜php arbeitet bei jedem eingehenden Vorgang Array-Element Für die Callback-Verarbeitung werfen wir einen Blick auf PHP-Abschlüsse. Verwenden Sie das Schlüsselwort use, um Variablen außerhalb des Gültigkeitsbereichs zu erben: 🎜rrreee🎜Das Rückgabeergebnis ist: 🎜rrreee🎜Offizielle PHP-Verwendungsmethode🎜rrreee🎜 Tatsächlich ist es nur das Prinzip. Es wird gesagt, dass JS und PHP ähnlich sind. Beide definieren zuerst Funktionen und rufen sie dann bei Bedarf auf. 🎜🎜Empfohlenes Lernen: 🎜JS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEingehende Analyse der Rückruffunktionen in js (detaillierte Erklärungsfreigabe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:juejin.im
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage