자바 스크립트 함수가 이미 실행 중이거나 다른 동안 실행되는 것을 방지하는 가장 좋은 방법은 무엇입니까?

Question

jquery를 사용하고 있으며 웹 페이지의 여러 버튼에 토글 방법을 바인딩하고 있습니다. 이 모양은 다음과 같습니다.

$('.button').toggle(function(){ 
    // first function 
}, function(){ 
    // second function 
}); 

그러나 이러한 두 가지 기능에는 애니메이션이 있습니다. 따라서 사용자는 첫 번째 또는 두 번째 기능이 실행되는 동안 버튼을 클릭 할 수 있습니다. 이렇게하면 HTML 요소의 순서가 엉망이되어 페이지 끝으로 이동할 수 있습니다. 기본적으로 이러한 함수의 기능은 첫 번째 클릭에서 한 요소를 끝으로 이동하고 다른 요소에서는 원래의 위치로 다시 이동하는 것입니다.

물론 페이지를 돌아 다니면서 버튼을 클릭하기는 어렵습니다. 하지만 가능합니다.

Answer 1

토글을 구현하는 것이 더 행복 할 것 같습니다. Toggle은 로직이 0 인 경우에만 실제로 작동합니다.

$('.button').click( 
function() { 
    if($(self).is(":animated") { 
    return false; 
    } 
    if($(self).is(".rolledup")) { 
    self.apply(roll_window_down);  
    } else { 
    self.apply(roll_window_up);  
    } 
}); 



function roll_window_up() { 
    $(self).addClass('rolledup'); 

    // first function  
} 

function roll_window_down() { 
    $(self).removeClass('rolledup'); 
    // first function  
} 

Answer 2

깃발을 사용할 수 있습니다. 애니메이션이 시작될 때 'isAnimating'플래그를 true으로 설정하고 끝나면 false를 설정합니다. 이 값이 false이면 모든 후속 애니메이션을 진행할 수 있습니다.

:animated selector이 이벤트 소유자에게 적용되는지 확인할 수도 있습니다. 그리고 그 결정에 근거하십시오.

Answer 3

bool을 세미 포어로 사용할 수 있습니다. 분명히 이것은 안전하지 않지만 자바 스크립트는 실제로 잠금을 지원하지 않으므로이 방법으로 교착 상태 및/또는 경쟁 조건을 쉽게 가질 수 있지만 당신은 두 가지 기능을 배치해야

Answer 4

시간 :의 99,9 %를 작동 당신은 당신이 함수 입구를 제어하는 ​​플래그를 보유 할 수있는 상황에서 전환 할 통과 -

(function() { 
    var toggling = false; 
    $('.button').toggle(function(){ 
    if (!toggling) { 
     toggling = true;   
     // first function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }, function(){ 
    if (!toggling) { 
     toggling = true;   
     // second function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }) 
)(); 

NB이 일련 번호는 입니다.은 .button 클래스를 갖는 요소를 토글합니다. IOW에는 모든 버튼에 대해 하나의 toggling 플래그 만 있습니다. 각 버튼마다 토글 플래그가 있어야합니다. -

$('.button').each(function() { 
    var toggling = false; 
    $(this).toggle(function(){ 
    if (!toggling) { 
     toggling = true;   
     // first function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }, function(){ 
    if (!toggling) { 
     toggling = true;   
     // second function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }); 
); 

Answer 5

대기열이 필요합니다. 당신은 세마포어 변수를 하나 만들 수 있지만, jQuery를 이미 하나를 제공합니다, 그래서 아마 당신은 그것을 사용하려면 :

$('.button').toggle(function() { 
    $(document).queue("foo", function() { 
    ... 
    }); 
}, function() { 
    $(document).queue("foo", function() { 
    ... 
    }); 
}); 

jQuery를 일반적으로 애니메이션을 직렬화 할 "FX"큐를 사용하지만,이 "foo는"사용할 수 있습니다 당신이 원하는 무엇이든을위한 대기열.

대기열은 어떤 객체 에나 놓을 수 있으므로, 그 안에 모든 .button 개의 객체가있는 컨테이너에 놓을 수 있습니다. 단추 (이) 자체에 넣을 수 없으면 현재 위치로 돌아갈 수 있습니다.

일단 작업을 완료하면 실제로 애니메이션을 중단해야합니다. 이것은 "fx"큐를 명시 적으로 비우거나 $('.button').stop();을 사용하여 모든 이전 애니메이션을 중지 할 수 있습니다.