jQuery OnClick 실행
-
02-07-2019 - |
문제
jQuery 1.2.5와 함께이 JavaScript가 작성되었습니다. 내가 쓴 플러그인의 기본 함수 () 내부에 포함되어 있습니다. 플러그인은 JCarousel과 매우 유사한 수평 갤러리 스크롤러입니다. 폭을 자동 계산하고 이미지의 크기와 이미지의 크기를 기반으로 스크롤해야 할 수를 결정합니다. 이는 모든 계산이 진행되고있는 것입니다.
내 질문은, 이전 실행이 완료되기 전에 어떻게 발사되는 것을 방지합니까? 예를 들어, 약간의 클릭을 행복하게하고 열렬히 으깬 경우 .digi_next
. 그런 일이 발생하면 UI에서 상황이 잘되지 않습니다. queue
, 그러나 그것을 사용하려는 모든 시도는 가치있는 일이 아닙니다.
var self = this;
$(".digi_next", this.container).click(function(){
var curLeft = $(".digi_container", self.container).css("left").split("px")[0];
var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos;
if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) {
newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1;
}
$(".digi_container", self.container).animate({
left: newLeft + "px"
}, self.rotateSpeed);
});
해결책
글로벌 바쁜 깃발을 사용하십시오. 클릭 핸들러를 입력 할 때 확인하고 확인하고 거짓 인 경우에만 진행하십시오. 즉시 true로 설정 한 다음 애니메이션이 끝날 때 다시 False로 설정하십시오. JavaScript는 단일 스레드이므로 걱정할 경주 조건이 없습니다.
var busy = false;
$("...").onclick(function() {
if (busy) return false;
busy = true;
$("...").animate(..., ..., ..., function() {
busy= false;
});
return false;
});
다른 팁
보세요 jQuery UI. 구체적으로 효과-부분 플러그인의. 슬라이드 효과를 사용합니다. 내 개인 웹 사이트 (상자 측면의 화살표를 클릭하십시오).
효과가 끝나기 전에 사용자가 효과를 두 번 이상 트리거하는 것을 방지합니다. 하나 이벤트 핸들러 그리고 콜백 함수.
아프게 언급 된 글로벌 플래그에 대한 대안으로, 값을 DOM 요소에 할당 할 수 있습니다. 그러면 페이지의 여러 요소가 동일한 동작을 가질 수있게합니다.
$("...").onclick(function(el) {
var self = el;
if (self.busy) return false;
self.busy = true;
$("...").animate(..., ..., ..., function() {
self.busy= false;
});
return false;
});
JavaScript 함수 호출은 asyncronus이므로 이전 호출이 종료 될 때 호출되는 콜백 함수 (오류의 경우)로 전달할 수 있습니다.
이 게시물에 쓴 기능을 이전에 발사 한 기능의 콜백으로 전달할 수 있습니다.
도움이 되었기를 바랍니다.
문안 인사