jQuery - 큐 (Queue) 정의

큐(Queue)란 특정 요소에서 애니메이션이 실행되는 순서로 저장되어 있는 공간입니다. 큐에 저장된 목록에서 순번대로 애니메이션을 하나씩 꺼내어 실행하고, 실행된 애니메이션은 제거하는 식입니다.

그림과 같이 실행될 애니메이션은 모두 큐에 저장됩니다. 이렇게 큐에 저장된 애니메이션을 하나씩 실행하는데, 먼저 들어간 애니메이션이 먼저 실행되고 마지막에 들어간 애니메이션은 마지막에 실행되게 됩니다.

큐에 보관되어있는 대기열은 모두 애니메이션이 실행 전입니다. 애니메이션이 들어간 순서대로 먼저 실행되면 실행된 애니메이션은 제거하여 큐를 비웁니다.

큐 메소드

.queue() 메소드는 큐에 대기중인 함수를 반환하거나 새로운 함수를 추가합니다. 형식은 그림을 통해 알 수 있습니다.

하지만 .queue() 메소드를 .animate() 중간에 추가하게 되면 .queue() 까지만 실행되고 그 뒤에 대기중인 대기열은 자동으로 취소가 됩니다.

그렇지만 뒤에 .dequeue() 메소드를 추가해 주면 취소되지 않고 연결되어 4번, 5번 애니메이션이 실행되게 할 수 있습니다.

대기중인 애니메이션을 제거하려면 .clearQueue() 를 추가합니다. .clearQueue() 는 현재 실행 중인 애니메이션은 제외하고 대기중인 애니메이션만 모두 제거합니다.

.stop() 과 비슷하지만 차이점이 있습니다. .stop() 은 애니메이션이 실행중이라도 즉시 멈추지만 .clearQueue() 는 실행중인 애니메이션은 멈추지 않는다는 점입니다.