문제

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이므로 이전 호출이 종료 될 때 호출되는 콜백 함수 (오류의 경우)로 전달할 수 있습니다.

이 게시물에 쓴 기능을 이전에 발사 한 기능의 콜백으로 전달할 수 있습니다.

도움이 되었기를 바랍니다.

문안 인사

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top