JavaScript コールバック関数の使用例の詳細な説明

今回は、JavaScriptコールバックコールバック関数ユースケースの詳細な説明、JavaScriptコールバック関数を使用する際の注意事項について説明します。以下は実際的なケースです。見てみましょう。

コールバック関数は、オープンソース プロジェクトを使用するときによく使用されます。コールバック関数が明確になれば、オープンソース プロジェクトを深く理解するのに役立ちます。

コールバック関数の説明百度百科:

コールバック関数とは、関数ポインタを介して呼び出される関数です。関数ポインタ (アドレス) をパラメータとして別の関数に渡し、このポインタを使用してそのポインタが指す関数を呼び出す場合、それをコールバック関数と呼びます。コールバック関数は、関数の実装者によって直接呼び出されるのではなく、特定のイベントまたは条件が発生したときに、そのイベントまたは条件に応答するために別のパーティによって呼び出されます。

理解するのは簡単ではないようです。例を見てみましょう (Zhihu):

あなたは何かを買うために店に行きましたが、たまたま欲しかったものが在庫切れだったので、その場を去りました。数日後、店舗に商品が到着し、電話を受けて店舗に商品を受け取りに行きました。この例では、自分の電話番号を店員に任せるときのことをコールバック関数と呼び、後で店舗に商品が入ったときのことをコールバック関数と呼びます。店員から電話がかかってくることをコールバック関数といい、店舗に商品を取りに行くときにコールバックイベントに応答することをコールバック関数といいます。

これは非常に理解しやすいですが、店員が作成されるとき、店員はさまざまなオブジェクトを扱う必要があり、さまざまな種類のオブジェクトに適応する必要があります。時はコールバック関数が必要です。

コールバック関数の使用シナリオを理解するために例を使用してみましょう:

タスクを完了する必要があります。1+1=? を計算します。

このタスクを自分で完了したい場合

コードは次のとおりです:

HTML コード

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

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

注:

1. ajax を使用して JSONP クロスドメイン リクエストを作成します。 は、要求された相手のコールバック関数名を変更できないためです。このページには複数の異なる JSONP リクエストがありますが、それらのコールバック関数名はすべて同じであり、_Callback。想到设置AJAX 的JSONP参数。但是发现根本不起作用。最后偶然发现 jsonpcallback では大文字と小文字が区別されます。これは jsonpcallback ではなく jsonpCallback です。

2. JSONP はマッシュアップを構築するための強力なテクノロジーですが、残念ながら、すべてのクロスドメイン通信のニーズに対応する万能薬ではありません。これにはいくつかの欠陥があるため、開発にリソースを投入する前に慎重に検討する必要があります。まず、最も重要なことですが、JSONP 呼び出しには エラー処理 がありません。動的スクリプトの挿入が有効な場合、呼び出しは実行されます。無効な場合、呼び出しはサイレントに失敗します。失敗に対するプロンプトはありません。たとえば、404 エラーはサーバーから捕捉できず、リクエストをキャンセルしたり再開したりすることはできません。ただし、しばらく待っても応答がない場合は無視してください。 (将来の jQuery バージョンには、JSONP リクエストを終了する機能が搭載される可能性があります) JSONP のもう 1 つの大きな欠点は、信頼できないサービスで使用すると危険になる可能性があることです。 JSONP サービスは、ブラウザーによって実行される関数呼び出しにラップされた JSON 応答を返すため、ホスト Web アプリケーションはさまざまな攻撃に対してより脆弱になります。 JSONP サービスの使用を計画している場合は、発生する可能性のある脅威を理解することが重要です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue親子コンポーネントの値転送とスロット適用手順の詳細な説明

vueプロジェクトでのVeeValidateフォーム検証ユースケースコード分析

以上がJavaScript コールバック関数の使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。