clearQueue
원문 링크 
http://api.jquery.com/clearQueue/
개요 : 대기열에 있는 아직 실행전인 모든 아이템을 제거합니다.
- .clearQueue( [queueName] )
- queueName 대기열(queue) 명. effect queue의 기본명은 fx 입니다.
.clearQueue() 함수가 호출되면, 대기열(queue, 이하 큐)에 있는 모든 함수가 큐(queue)에서 제거되면서 실행이 중지됩니다. 인자 없이 사용하면, .clearQueue() 는 기본 큐인 fx에 남아있는 모든 함수를 제거합니다. 비슷한 형태로는 .stop(true) 로 사용하는 방법이 있습니다. 하지만, .stop() 함수는 오직 움직임에만 관련이 있습니다. 즉, 움직임을 멈추는 효과만 있다는 겁니다. 반면, .clearQueue() 는 .queue() 함수로 일반적인 jQuery 큐에 쌓인 어떤 함수라도 모두 제거합니다.
말은 어렵지만 간단하게는 호출되면 그 다음으로 실행될 모든 함수들이 대기열에서 다 제거된다는 거네요.
예 제
큐를 비웁니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
var myDiv = $("div");
myDiv.show("slow");
myDiv.animate({left:'+=200'},5000);
myDiv.queue(function () {
var _this = $(this);
_this.addClass("newcolor");
_this.dequeue();
});
myDiv.animate({left:'-=200'},1500);
myDiv.queue(function () {
var _this = $(this);
_this.removeClass("newcolor");
_this.dequeue();
});
myDiv.slideUp();
});
$("#stop").click(function () {
var myDiv = $("div");
myDiv.clearQueue();
myDiv.stop();
});</script>
</body>
</html>미리보기
재밌습니다. 버튼 클릭해 보세요.
특정 상황에 실행을 모두 중지시키고 싶을 때 사용해야 겠습니다. 그런데 예제만 가지고는 활용하기가 좀 그렇네요. 좀 더 공부를 해야겠습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| fadeOut(), 서서히 사라지게 하기 (0) | 2012.04.16 |
|---|---|
| fadeIn(), 서서히 나타나게 하기 (0) | 2012.04.16 |
| dequeue(), 대기열의 다음 함수 실행 (2) | 2012.04.16 |
| delay(), 대기열의 함수 실행을 지연시키기 (0) | 2012.04.16 |
| animate(), 요소를 움직이기 (8) | 2012.03.30 |
| unload(), 페이지에서 벗어날 때 (2) | 2012.03.20 |
| undelegate(), 바인딩 해제하기 (0) | 2012.03.20 |
| unbind(), 바인딩 해제하기 (0) | 2012.03.20 |