Explication détaillée des cas d'utilisation de la fonction de rappel JavaScript

Cette fois, je vous apporte JavaScript rappelFonction de rappel explication détaillée des cas d'utilisation, quelles sont les précautions lors de l'utilisation de la fonction de rappel JavaScript, les éléments suivants sont pratiques cas, jetons un coup d'oeil.

Les fonctions de rappel sont souvent utilisées lors de l'utilisation de projets open source. Si la fonction de rappel est clarifiée, elle nous sera d'une grande aide pour comprendre les projets open source en profondeur.

Fonction de rappel Explication de l'Encyclopédie Baidu :

La fonction de rappel est une fonction appelée via le pointeur de fonction. Si vous passez un pointeur de fonction (adresse) en paramètre à une autre fonction, et que ce pointeur est utilisé pour appeler la fonction vers laquelle il pointe, on dit qu'il s'agit d'une fonction de rappel. La fonction de rappel n'est pas appelée directement par l'implémenteur de la fonction, mais est appelée par une autre partie lorsqu'un événement ou une condition spécifique se produit pour répondre à l'événement ou à la condition.

Cela ne semble pas si simple à comprendre. Prenons un exemple (Zhihu) :

Vous allez dans un magasin pour acheter quelque chose, et quoi. Vous souhaitez être en rupture de stock. Vous avez donc laissé votre numéro de téléphone au vendeur du magasin. Après quelques jours, le magasin avait les marchandises et le vendeur du magasin vous a appelé. Après avoir reçu l'appel, vous êtes allé au magasin pour les récupérer. jusqu'à la marchandise. Dans cet exemple, votre numéro de téléphone est appelé fonction de rappel. Lorsque vous laissez votre numéro de téléphone au vendeur du magasin, cela s'appelle la fonction de rappel d'enregistrement. Lorsque le magasin a des marchandises plus tard, cela s'appelle l'événement associé au rappel. le commis du magasin vous appelle, cela s'appelle la fonction de rappel. Lorsque vous vous rendez au magasin pour récupérer la marchandise, cela s'appelle répondre à l'événement de rappel.

C'est beaucoup plus facile à comprendre. Lorsque le commis est créé, il ne sait pas qui viendra au magasin pour acheter des choses. Le commis doit gérer de nombreux objets différents et doit s'adapter à différents types d'objets. objets. À ce stade, une fonction de rappel est nécessaire.

Utilisons un exemple pour comprendre le scénario d'utilisation de la fonction de rappel :

Je dois terminer une tâche, calculer 1+1= ?

Moi Si vous souhaitez réaliser cette tâche vous-même

Le code est le suivant :

Code HTML

<p class="imgp">
  <p class="search">
    <input class="put" type="text" id="keyWord"/>
    <ul id="tipList"></ul>
</p>

Code JavaScript

(function (){
  $(function(){
  $("#keyWord").on("keyup",function(event){
    var keyCode = event.keyCode;
    if(keyCode == 38|| keyCode ==40){
      settingTipList(keyCode);
      return false;
    }
    var keyWord = $(this).val();
    getTipList(keyWord);
  });
  var index = -1;
  function settingTipList(keyCode){
    if(keyCode == 38){
      index--;
    }else{
      index++;
    }
    var size = $("#tipList li").size();
    index =index % size;
    $("#tipList li").removeClass("active").eq(index).addClass("active");
    var selectLiContent = $("#tipList li").eq(index).html();
    $("#keyWord").val(selectLiContent);
  };
  //获取数据
  function getTipList(keyWord){
    var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
    var data = {
      wd:keyWord,
      cb:"hhh"
    };
    $.ajax({
      url:url,
      data:data,
      type:"GET",
      dataType:"jsonp",
      jsonpCallback:"hhh",
      success:function(data){
        var tipList = data.s;
        handleData(tipList)
      },
      error:function(error){
        alert("接口出错")
      }
    });
  }
  });
  function handleData(tipList){
    var tipHTML= "";
    for(var i in tipList){
      var text = tipList[i];
      tipHTML += "<li>"+text+"</li>"
    }
    $("#tipList").css({"opacity":"1"});
    $("#tipList").html(tipHTML);
  }
})()
//如果不写jsonpCallback、后面jsonpCallback“”空置、直接跳出“接口出错了。

Remarque :

1 Utilisez ajax pour effectuer une demande inter-domaines JSONP, car le nom de la fonction de rappel du. la partie requise ne peut pas être modifiée. Il y aura plusieurs requêtes JSONP différentes sur cette page, mais leurs noms de fonction de rappel sont tous les mêmes, _Callback. Pensez à définir les paramètres JSONP d'AJAX. Mais j'ai constaté que cela ne fonctionnait pas du tout. Finalement, j'ai accidentellement découvert que jsonpcallback est sensible à la casse. Est-ce que jsonpCallback est au lieu de jsonpcallback ?

2. JSONP est une technologie puissante pour créer des mashups, mais malheureusement, ce n'est pas une panacée pour tous les besoins de communication inter-domaines. Il présente certains défauts qui doivent être soigneusement examinés avant d’engager des ressources dans le développement. Tout d’abord, et surtout, il n’y a pas de gestion des erreurs pour les appels JSONP. Si l'insertion du script dynamique est valide, l'appel est exécuté ; s'il n'est pas valide, il échoue silencieusement. Il n’y a aucune invite à l’échec. Par exemple, les erreurs 404 ne peuvent pas être détectées sur le serveur et les demandes ne peuvent pas être annulées ou redémarrées. Cependant, s'il n'y a pas de réponse après un certain temps, ignorez-la. (Les futures versions de jQuery pourraient avoir des fonctionnalités permettant de mettre fin aux requêtes JSONP.) Un autre inconvénient majeur de JSONP est qu'il peut être dangereux lorsqu'il est utilisé par des services non fiables. Étant donné que le service JSONP renvoie une réponse JSON enveloppée dans un appel de fonction exécuté par le navigateur, il rend l'application Web hôte plus vulnérable à diverses attaques. Si vous envisagez d'utiliser les services JSONP, il est important de comprendre les menaces qui peuvent être posées.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de transfert de valeur et d'application de slot des composants vue parent-enfant

Formulaires VeeValidate Calibrage unique dans le projet Vue Analyse du code du cas d'utilisation du test

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!