IT TIP

jquery의 promise 메서드는 실제로 어떻게 작동합니까?

itqueen 2020. 11. 25. 21:48
반응형

jquery의 promise 메서드는 실제로 어떻게 작동합니까?


난 정말 무엇을 이해하지 못하는 delegate하고 promise있습니다.

문서에 따르면-

  • delegate 선택기와 이벤트를 현재 및 미래의 항목에 대해 나중에 다시 사용할 수있는 일종의 포장 컨테이너에 바인딩합니다.
  • promise()새로로드 된 모든 항목이 일치하면 처음 바인딩되었을 때로 다시 매핑합니다. 이 약속 방법을 정말 이해하지 못할 수도 있습니다.

래퍼가 아직 거기에 있지만 래퍼 컨테이너의 내용이 변경되었거나 Ajax? 이벤트가 처음 바인딩 될 때처럼 트리거되거나 작동하지 않는 이유는 무엇입니까?

그리고 예, 나는 문서 페이지를 방문했지만 그들의 설명을 완전히 이해하지 못했습니다.


이 질문에 약간 혼란 스럽습니다. 나는 때문에이 생각 당신이 혼동하는 promisedelegate. 실제로는 jQuery와 완전히 관련이없는 기능입니다. 각각 개별적으로 설명하겠습니다.

delegate

delegatejQuery 1.4.2에 도입 된 jQuery의 기능입니다. ( livejQuery 1.3에 추가 된 기능에 대한 더 좋은 접근 방식입니다 ). DOM 수정, 특히 AJAX 호출과 관련된 특정 문제를 해결합니다.

이벤트 핸들러를 바인딩 할 때 선택에 바인딩합니다. 따라서 $('.special').click(fn)이벤트 핸들러를 special클래스 의 모든 멤버에 바인딩 할 수 있습니다 . 이러한 요소에 바인딩하므로 해당 요소 중 하나에서 클래스를 제거해도 이벤트가 계속 트리거됩니다. 반대로, 요소에 클래스를 추가하거나 DOM에 새 요소를 추가하면 이벤트가 바인딩되지 않습니다.

"이벤트 버블 링"이라고하는이를 완화하는 Javascript의 기능이 있습니다. 이벤트가 트리거되면 먼저 브라우저가 이벤트가 발생한 요소에 알립니다. 그런 다음 DOM 트리로 올라가 각 조상 요소에 알립니다. 즉, DOM 트리의 상위 요소에 이벤트 핸들러를 바인딩 할 수 있으며, 모든 하위 요소에서 트리거되는 이벤트 (핸들러가 바인딩되었을 때 존재하지 않는 이벤트도 포함)에 바인딩 할 수 있습니다.

delegate이것은 jQuery의 구현입니다. 먼저 상위 요소를 선택합니다. 그런 다음 선택기를 지정합니다. 원래 요소가이 선택기와 일치하는 경우에만 처리기가 실행됩니다. 그런 다음 같은 이벤트 유형을 지정 click, submit, keydown, 단지와 같은 bind. 마지막으로 이벤트 핸들러를 지정합니다.

$('#containingElement').delegate('a.special', 'click', function() {
    alert('This will happen on all links with the special class');
});

promise

promise비교적 최근에 jQuery 기능 세트에 추가되었습니다. DeferredjQuery 1.5에서 도입 된 개념의 일부입니다 . ( "deferred"와 "delegate"사이의 사운드 유사성이 아마도 혼란의 원인이라고 생각합니다.) 이것은 비동기 코드의 복잡성을 추상화하는 방법입니다. 이에 대한 가장 좋은 예는에서 반환 된 객체가 객체이기 때문에 AJAX 호출을 사용 $.ajax하는 Deferred것입니다. 예를 들면 :

$.ajax({
    url: 'somepage.cgi',
    data: {foo: 'bar'}
}).done(function() {
    // this will be run when the AJAX request succeeds
}).fail(function() {
    // this will be run when the AJAX request fails
}).always(function() {
    // this will be run when the AJAX request is complete, whether it fails or succeeds
}).done(function() {
    // this will also be run when the AJAX request succeeds
});

따라서 $.ajax두 개 이상의 핸들러를 바인딩 할 수 있고 초기 호출 후에 바인딩 할 수 있다는 점을 제외 하면 호출 에서 성공 핸들러를 바인딩하는 것과 여러면에서 동일 합니다.

비동기 적으로 처리하는 것이 유용한 또 다른 경우는 애니메이션입니다. 함수에 콜백을 제공 할 수 있지만 위에서 제공 한 AJAX 예제와 유사한 구문으로이를 수행하는 것이 더 좋습니다.

jQuery 1.6에서는이 기능이 가능해졌으며이 promise구현의 일부입니다. promisejQuery 선택을 호출 하면 객체의 모든 애니메이션이 완료되었을 때 이벤트 핸들러를 바인딩 할 수있는 객체를 얻게됩니다.

예를 들면 :

$('div.special').fadeIn(5000).promise().then(function() {
    // run when the animation succeeds
}).then(function() {
    // also run when the animation succeeds
});

다시 말하지만 이는 기존 방법과 효과가 비슷하지만 유연성을 추가합니다. 나중에 핸들러를 바인딩 할 수 있으며 둘 이상을 바인딩 할 수 있습니다.

요약

기본적으로,이 사이에 유의 한 관계가 없다 delegate하고 promise있지만 현대 jQuery를 모두 유용한 기능입니다.

참고 URL : https://stackoverflow.com/questions/6080050/how-does-jquerys-promise-method-really-work

반응형