JS 콜백 기능을 사용하는 단계에 대한 자세한 설명

이번에는 JS 콜백콜백 함수를 사용하는 단계와 JS 콜백 함수 사용 시 주의사항에 대해 자세히 설명하겠습니다. 다음은 실제 사례입니다.

콜백 함수는 오픈소스 프로젝트를 사용할 때 자주 사용됩니다. 콜백 함수에 대해 명확하게 설명하면 오픈소스 프로젝트를 깊이 있게 이해하는 데 큰 도움이 될 것입니다.

콜백 함수 설명 바이두 백과사전:

콜백 함수는 함수 포인터를 통해 호출되는 함수입니다. 함수 포인터(주소)를 다른 함수에 매개변수로 전달하고 이 포인터가 가리키는 함수를 호출하는 데 사용되는 경우 이를 콜백 함수라고 합니다. 콜백 함수는 함수 구현자가 직접 호출하는 것이 아니라 특정 이벤트나 조건이 발생했을 때 상대방이 해당 이벤트나 조건에 대응하기 위해 호출하는 함수이다.

이해하기 쉽지 않을 것 같습니다. 예를 들어보겠습니다(지호):

무엇을 사러 가게에 갔는데, 사고 싶은 것이 품절되어 떠났습니다. 점원에게 전화번호를 알려주세요. 며칠 후 매장에 물건이 도착했고, 점원이 전화를 받은 후 상품을 찾으러 매장에 갔습니다. 이 예에서는 전화번호를 콜백 함수라고 합니다. 매장 직원에게 전화번호를 남겨두면 나중에 매장에 상품이 있을 때 콜백과 관련된 이벤트라고 합니다. 매장 직원이 전화를 하는 것을 콜백 함수라고 합니다. 상품을 픽업하기 위해 매장에 갔을 때 콜백 이벤트에 응답한다고 합니다.

이 점은 점원이 생성될 때 누가 물건을 사러 올지 알 수 없다는 점입니다. 점원은 다양한 물건을 다루어야 하며 다양한 유형의 물건에 적응해야 합니다. 시간이 지나면 콜백 함수가 필요합니다.

예를 사용하여 콜백 함수의 사용 시나리오를 이해해 보겠습니다.

나는 작업을 완료해야 합니다. 1+1=?을 계산해야 합니다.

이 작업을 직접 완료하려면

코드는 다음과 같습니다.

HTML code

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

참고:

1. ajax를 사용하여 JSONP 크로스를 만듭니다. 도메인 요청이기 때문에 요청한 당사자의 콜백 함수 이름은 수정할 수 없습니다. 이 페이지에는 여러 가지 JSONP 요청이 있지만 콜백 함수 이름은 모두 동일하며 _Callback。想到设置AJAX 的JSONP参数。但是发现根本不起作用。最后偶然发现 jsonpcallback는 대소문자를 구분합니다.

2. JSONP는 매시업 구축을 위한 강력한 기술이지만 불행히도 모든 도메인 간 통신 요구에 대한 만병통치약은 아닙니다. 여기에는 몇 가지 결함이 있으므로 개발에 리소스를 투입하기 전에 신중하게 고려해야 합니다. 첫째, 가장 중요한 것은 JSONP 호출에는 오류 처리가 없다는 것입니다. 동적 스크립트 삽입이 유효하면 호출이 실행되고, 유효하지 않으면 자동으로 실패합니다. 실패에 대한 메시지는 없습니다. 예를 들어 404 오류는 서버에서 포착할 수 없으며 요청을 취소하거나 다시 시작할 수 없습니다. 하지만, 한참을 기다려도 응답이 없으면 무시하세요. (향후 jQuery 버전에는 JSONP 요청을 종료하는 기능이 있을 수 있습니다.) JSONP의 또 다른 주요 단점은 신뢰할 수 없는 서비스에서 사용할 때 위험할 수 있다는 것입니다. JSONP 서비스는 브라우저에서 실행되는 함수 호출로 래핑된 JSON 응답을 반환하므로 호스트 웹 애플리케이션이 다양한 공격에 더욱 취약해집니다. JSONP 서비스를 사용하려는 경우 발생할 수 있는 위협을 이해하는 것이 중요합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

구성 요소와 함께 vuex를 사용하는 방법

vux-ui를 사용하여 양식 확인을 사용자 정의하는 방법

위 내용은 JS 콜백 기능을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!