Utilisation de la fonction de rappel JS (avec code)

Cette fois je vais vous présenter l'utilisation du rappel JSfonction de rappel (avec code), quelles sont les précautions lors de l'utilisation de la fonction de rappel JS, ce qui suit est un cas pratique, jetons un coup d'œil ensemble. Jetez un œil.

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

Si Moi souhaite réaliser cette tâche par moi-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>

JavaScript Code

(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 faire une Requête inter-domaines JSONP, car. la fonction de rappel de la partie demandée est Le nom ne peut pas être modifié. 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 :

Comment utiliser vue pour implémenter le mini-jeu 2048

Comment utiliser vee-validate dans Vue

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!