Verwendung der JS-Callback-Funktion (mit Code)

Dieses Mal werde ich Ihnen die Verwendung der JS-RückruffunktionRückruffunktion (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der JS-Rückruffunktion? Das Folgende ist ein praktischer Fall. Lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.

Callback-Funktionen werden häufig bei der Verwendung von Open-Source-Projekten verwendet. Wenn die Callback-Funktion geklärt ist, wird es uns eine große Hilfe sein, die Open-Source-Projekte im Detail zu verstehen.

Rückruffunktion Erklärung der Baidu-Enzyklopädie:

Die Rückruffunktion ist eine Funktion, die über den Funktionszeiger aufgerufen wird. Wenn Sie einen Funktionszeiger (Adresse) als Parameter an eine andere Funktion übergeben und dieser Zeiger zum Aufrufen der Funktion verwendet wird, auf die er zeigt, sprechen wir von einer Callback-Funktion. Die Rückruffunktion wird nicht direkt vom Implementierer der Funktion aufgerufen, sondern von einer anderen Partei, wenn ein bestimmtes Ereignis oder eine bestimmte Bedingung eintritt, um auf das Ereignis oder die Bedingung zu reagieren.

Es scheint nicht so einfach zu verstehen, schauen wir uns ein Beispiel an (Zhihu):

Du gehst in ein Geschäft, um etwas zu kaufen, und was Sie haben also Ihre Telefonnummer beim Verkäufer hinterlassen. Nach ein paar Tagen hatte der Verkäufer die Ware bei Ihnen, und nachdem Sie den Anruf erhalten hatten, gingen Sie zum Laden die Ware auf. In diesem Beispiel wird Ihre Telefonnummer als Rückruffunktion bezeichnet. Wenn Sie dem Verkäufer Ihre Telefonnummer hinterlassen, wird dies als Registrierungsrückruffunktion bezeichnet Der Verkäufer ruft Sie an, dies wird als Rückruffunktion bezeichnet. Wenn Sie in den Laden gehen, um die Ware abzuholen, wird dies als Reaktion auf das Rückrufereignis bezeichnet.

Das ist viel einfacher zu verstehen, wenn der Verkäufer nicht weiß, wer in den Laden kommt, um Dinge zu kaufen, und er muss sich an verschiedene Arten von Gegenständen anpassen Zu diesem Zeitpunkt ist eine Rückruffunktion erforderlich.

Lassen Sie uns ein Beispiel verwenden, um das Verwendungsszenario der Rückruffunktion zu verstehen:

Ich muss eine Aufgabe erledigen und 1+1= berechnen?

Ich, wenn Sie diese Aufgabe selbst erledigen möchten

Der Code lautet wie folgt:

HTML-Code

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

JavaScriptCode

(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“”空置、直接跳出“接口出错了。

Hinweis:

1. Verwenden Sie Ajax, um eine JSONP-domänenübergreifende Anforderung zu erstellen, da der Name der Rückruffunktion lautet der gewünschten Partei kann nicht geändert werden. Auf dieser Seite wird es mehrere verschiedene JSONP-Anfragen geben, aber die Namen ihrer Rückruffunktionen sind alle gleich, _Callback. Denken Sie an das Festlegen der JSONP-Parameter von AJAX. Habe aber festgestellt, dass es überhaupt nicht funktioniert hat. Schließlich habe ich zufällig entdeckt, dass bei jsonpcallback zwischen Groß- und Kleinschreibung unterschieden wird. Ist jsonpCallback anstelle von jsonpcallback;

2. JSONP ist eine leistungsstarke Technologie zum Erstellen von Mashups, aber leider kein Allheilmittel für alle domänenübergreifenden Kommunikationsanforderungen. Es weist einige Mängel auf, die sorgfältig geprüft werden müssen, bevor Ressourcen für die Entwicklung bereitgestellt werden. Erstens und am wichtigsten: Es gibt keine Fehlerbehandlung für JSONP-Aufrufe. Wenn die dynamische Skripteinfügung gültig ist, wird der Aufruf ausgeführt; wenn sie ungültig ist, schlägt er stillschweigend fehl. Es gibt keine Aufforderung zum Scheitern. Beispielsweise können 404-Fehler vom Server nicht abgefangen werden und Anfragen können nicht abgebrochen oder neu gestartet werden. Wenn Sie jedoch nach einer Weile keine Antwort erhalten, ignorieren Sie diese. (Zukünftige Versionen von jQuery verfügen möglicherweise über Funktionen zum Beenden von JSONP-Anfragen.) Ein weiterer großer Nachteil von JSONP besteht darin, dass es gefährlich sein kann, wenn es von nicht vertrauenswürdigen Diensten verwendet wird. Da der JSONP-Dienst eine JSON-Antwort zurückgibt, die in einen vom Browser ausgeführten Funktionsaufruf eingeschlossen ist, wird die Host-Webanwendung anfälliger für eine Vielzahl von Angriffen. Wenn Sie JSONP-Dienste nutzen möchten, ist es wichtig, die möglichen Bedrohungen zu verstehen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue verwendet, um das 2048-Minispiel zu implementieren

Wie man Vee-Validate verwendet Vue

Das obige ist der detaillierte Inhalt vonVerwendung der JS-Callback-Funktion (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!