recherche

Maison >interface Web >js tutoriel >Explication détaillée de la façon d'utiliser la fonction de rappel (callback) dans jquery

Explication détaillée de la façon d'utiliser la fonction de rappel (callback) dans jquery

伊谢尔伦
伊谢尔伦original
2017-06-16 16:41:595418parcourir

Quand j'apprenais jquery par moi-même, j'ai vu un mot anglais (Callback), et tout à coup j'ai senti une sueur froide dans mon dos. Après une recherche rapide sur Google, j'ai découvert que la traduction chinoise originale était un rappel. C'est la fonction de rappel . Je n'ai pas compris, alors j'ai cherché sur Google la fonction de rappel et j'ai trouvé que les explications chinoises sur Internet étaient trop « ésotériques ». J'ai admis que je manquais de talent et de connaissances. Après avoir lu quelques exemples de rappel, il me semble comprendre un peu. Ce qui suit est ma compréhension de la fonction de rappel. Si je comprends mal, veuillez me corriger, je vous en suis très reconnaissant.

Tout d'abord, commençons par la définition anglaise sur le site jquery. En tant que chinois, je me sens vraiment tragique. La définition d'un rappel est interprétée par des "experts" nationaux. Il semble qu'il ne soit un expert que s'il vous fait participer. Nuages ​​flottants, tout est nuages ​​flottants.

Un rappel est une fonction qui est passée en argument à une autre fonction et qui est exécutée une fois sa fonction parent terminée.

C'est l'explication en js, je ne compte pas l'explication dans d'autres langues.

Au sens littéral, le rappel est le processus d'appel d'une fonction. Commençons donc par comprendre ce processus d’appel. La fonction a a un paramètre, qui est la fonction b. Lorsque la fonction a est exécutée, la fonction b est exécutée. Ce processus est alors appelé rappel.

En fait, le chinois est aussi facile à comprendre : callback, callback, signifie rappeler. Terminez la fonction a à l’avance et appelez la fonction b plus tard.

Un exemple concret : vous renvoyez votre petite amie à la maison après un rendez-vous. Lorsque vous lui direz au revoir, vous direz certainement : "Envoyez-moi un message quand vous rentrerez à la maison. Je m'inquiète pour vous." ? Ensuite, votre petite amie vous a envoyé un message après son retour à la maison. Garçon, tu as une chance.

En fait, il s'agit d'un processus de rappel. Vous laissez une fonction b (demander à votre petite amie de vous envoyer un message) à votre petite amie, puis votre petite amie rentre chez elle. L'action de rentrer chez elle est la fonction a. Elle doit d'abord rentrer chez elle, exécuter le contenu de la fonction a, puis exécuter la fonction b, et vous recevrez alors un message.

Une chose doit être claire ici : la fonction b est passée à la fonction a sous la forme d'un paramètre, puis la fonction b est appelée fonction de rappel.

Peut-être que quelqu'un a des questions : dois-je le passer en paramètre ? Je ne peux pas appeler la fonction b directement dans la fonction a ? En effet, c’est possible. Résoudre.

76ced903fda0a77cfa9ad732cce721f6

Exemple de compréhension : 

<html> 
 
<head> 
 
<title>回调函数(callback)</title> 
<script language="javascript" type="text/javascript"> 
function a(callback) 
{    
    alert("我是parent函数a！"); 
    alert("调用回调函数"); 
    callback(); 
} 
function b(){ 
alert("我是回调函数b"); 
 
} 
function c(){ 
alert("我是回调函数c"); 
 
} 
 
function test() 
{ 
    a(b); 
   a(c); 
} 
 
</script> 
</head> 
 
<body> 
<h1>学习js回调函数</h1> 
<button onClick=test()>click me</button> 
<p>应该能看到调用了两个回调函数</p> 
</body> 
 
</html>

Tout le monde peut utiliser la fonction de rappel, mais une fois que Jquery l'a encapsulée, tout le monde ne peut pas comprendre le fonction de rappel.

JS Api explique ceci : Un rappel est une fonction qui est passée en argument à une autre fonction et qui est exécutée une fois sa fonction parent terminée.

Bien sûr, nous pouvons réellement le faire en JS. Essayez la magie des fonctions de rappel.

Si vous l'appelez directement dans la fonction a, alors la fonction de rappel sera restreinte. Mais utiliser des fonctions comme paramètres présente les avantages suivants : lorsque vous exécutez a(b), la fonction b devient une fonction de rappel, et lorsque vous pouvez également exécuter a(c), la fonction c devient une fonction de rappel. Si vous écrivez function a(){...;b();}, vous perdez la flexibilité des variables. Voici le code : 

<!DOCTYPE HTML> 
<html> 
<head>  
<meta charset="GBK" />
<title>回调函数(callback)</title> 
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript"> 
    var f;
    function d(){
        alert("我是Jquery定义的函数d");
    }
    var e = function(){
        alert("我也是Jquery定义的函数e");
    }
    
    function a(callback) {    
        alert("我是parent函数a！");   
        d(); 
        if (typeof callback === "function"){
            //alert(callback);
            callback(); 
        }
    } 
    function b(){ 
        alert("我是回调函数b");  
      
        d();
        e();
        f();
    } 
    function c(){ 
        alert("我是回调函数c");   
        d();
        e();
        f();
    } 
    function test1() { 
        a(b); 
    } 
    function test2() { 
        a(c); 
    } 
    $(function(){ 
        f = function(){ 
            alert("我是回调函数f");   
        } 
    });
</script> 
</head> 
<body > 
    <h1>学习js回调函数</h1> 
    <button onClick=test1()>test a(b)</button> 
    <button onClick=test2()>test a(c)</button> 
    <p>应该能看到调用了两个回调函数</p> 
    <p > </p> 
</body> 
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la différence entre $(selector).each() et $.each() de JqueryArticle suivant：Explication détaillée de la différence entre $(selector).each() et $.each() de Jquery

Articles Liés

Voir plus