jQuery 1.6에서 이벤트 위임을 사용하면 공통 상위 항목으로 버블 링 한 이벤트에 응답 할 수 있습니다.jquery 이벤트 위임 연속 호출이 가능한 변수 범위
샘플 구현은 다음과 같다 : 당신이 많은 이벤트가 한 페이지에 바인딩 갖고 싶어 트리거가있을 때 구조의
(function($){
$.fn.myeventhandler = function() {
return this.delegate('a.next, a.prev', 'click customEvent', function (event) {
var target=$(event.target);
var bar = null;
if('click' == event.type) { /*~[ call this 'a' ]~*/
// handle the click event
$('#next-element').animate({width:'200px'},1300,function(){
bar = 'value1';
$('#next-element').animate({width:'100px'},1300,function(){
bar = 'value2';
console.log(bar);
});
});
} else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/
// handle the customEvent event
$('#my-element').animate({height:'200px'},1300,function(){
bar = 'my-event1';
console.log(bar);
});
}
return false;
});
}
})(jQuery);
이 종류는 정말 잘 작동 할 수 있습니다. 그러나 나는 호기심이 많은 행동을 발견하고 누군가 다음과 같은 범위에서 나를 계몽 할 수 있는지 궁금해했습니다.
'a'앞에 변수 'var bar;'을 정의하고 'a'와 'a' 실행에 시간이 오래 걸리는 경우 '클릭'이 두 번째로 트리거되면 '막대'변수에 값이 재 할당되거나 새 값이 생성됩니까?
질문의 이유는 애니메이션을 완료하는 데 1.3 초가 걸리는 '미완성'애니메이션이 있다는 것입니다. 연속 된 두 번의 클릭 이벤트를 발생 시키면 대상 및 유형이 올바르게 설정되지만 두 번째 애니메이션이 첫 번째 애니메이션에 영향을 미치는 것처럼 보이고 두 개의 유효 범위가 서로 사용할 수있는 것처럼 보입니다.
아직 애니메이션이 끝나지 않아 jsFiddle에서 온라인으로 작업 할 준비가되지 않았지만 여기에 범위에 대한 엄지 손가락 규칙이 있습니다. 조사해야하거나 사용할 수있는 범위에 대한 명확한 설명이 있어야합니다. 누군가 찾은 적이 있습니까?
편집 : 위의에서 , 나는 내가 사용하고있는 것과 유사한 상황에서 추가했습니다. 위의 단순화 된 경우, 'bar'의 값은 여전히 2 회의 연속 호출에서 예상 값을 유지하지만, 콜백 함수에 매개 변수를 특별히 전달하지 않으면 (여전히) 작업하고있는 더 복잡한 경우에는 여전히 콜백이 후속 호출에 의해 생성 된 값을 볼 수 있도록 매개 변수의 값을 변경하기 위해 2 회 연속 호출을 허용하는 조건 - 트리거 된 호출에서 논리적으로 설정된 값이 아님. 단순화 된 예제에서이 효과를 복제 할 수있는 사람이라면 고맙겠습니다. 나는 그것을 복제하는 jsFiddle을 생성하려고 내 함수를 깎아 내리고있다.
감사합니다, AE
'무엇이'입니까? ? ? –
안녕하세요, Interstellar_Coder, 댓글의 'a'는 코드의 첫 번째 if() 블록을 의미하고 'b'는 코드의 'else'블록을 나타냅니다. 주석이 도움이되지 않는다면 유감입니다. 더 잘 설명하는 좋은 예가 무엇입니까? ? – MyStream