JQUERY

queue()

funfunweb 2024. 11. 6. 12:19

jQuery에서 **큐(queue)**는 애니메이션과 같은 비동기 작업을 처리하는데 사용되는 작업 대기열입니다. jQuery는 여러 개의 애니메이션이나 효과가 연속적으로 실행될 때, 이들을 관리하기 위해 큐를 사용합니다. 큐는 작업들이 순차적으로 실행될 수 있도록 합니다. 이로 인해 하나의 작업이 끝난 후 다음 작업이 시작되는 방식으로 동작합니다.

큐란 무엇인가?

큐(queue)는 대기열 또는 작업 대기 리스트라고 할 수 있습니다. 각 애니메이션이나 효과는 큐에 들어가며, 실행될 차례가 오면 순차적으로 실행됩니다.

예를 들어, animate() 메서드를 사용하면 그 애니메이션은 큐에 추가됩니다. 만약 큐에 여러 개의 애니메이션이 있다면, 이전 애니메이션이 끝난 후 다음 애니메이션이 실행됩니다.

 

큐는 일반적으로 작업들이 대기하는 "줄"처럼 생각할 수 있습니다. 큐에 작업이 추가되면, 추가된 순서대로 실행되고, 큐에서 작업이 하나씩 처리될 때마다 앞쪽에서 빠져나갑니다.

큐의 구조 (FIFO)
------------------------
| 작업 1 | 작업 2 | 작업 3 |
------------------------
  • 작업 1은 첫 번째로 들어왔고, 작업 3은 마지막으로 들어왔습니다.
  • 작업 1이 먼저 실행되고, 그 다음으로 작업 2, 마지막으로 작업 3이 실행됩니다.
1. 큐가 비어있는 상태
------------------------
|   (빈 공간)  |
------------------------

2. 작업 1이 추가된 상태
------------------------
| 작업 1 |
------------------------

3. 작업 2가 추가된 상태
------------------------
| 작업 1 | 작업 2 |
------------------------

4. 작업 3이 추가된 상태
------------------------
| 작업 1 | 작업 2 | 작업 3 |
------------------------

2. 큐에 작업이 추가되는 과정(선입선출)

큐에 작업이 추가될 때마다 뒤에 새로운 작업이 추가됩니다.

큐에서 작업이 실행될 때, 첫 번째로 들어온 작업부터 처리됩니다. 작업이 하나씩 실행되고 나면, 앞쪽에서 빠져나가게 됩니다.

1. 큐 상태 (처리 전)
------------------------
| 작업 1 | 작업 2 | 작업 3 |
------------------------

2. 작업 1이 처리된 후 (첫 번째 작업 실행 후)
------------------------
| 작업 2 | 작업 3 |
------------------------

3. 작업 2가 처리된 후 (두 번째 작업 실행 후)
------------------------
| 작업 3 |
------------------------

4. 작업 3이 처리된 후 (마지막 작업 실행 후)
------------------------
|   (빈 공간) |
------------------------

 

기본 동작

jQuery는 기본적으로 애니메이션 큐를 사용하여 여러 애니메이션을 연속적으로 실행합니다. 각 애니메이션은 큐에 대기 중인 작업으로 저장되며, 하나씩 실행됩니다. 이 방식은 delay(), animate(), fadeIn() 등의 메서드와 함께 사용됩니다.

큐의 관리

jQuery는 큐를 다룰 수 있는 여러 메서드를 제공합니다:

  1. .queue(): 큐에 있는 작업을 조회하거나 추가합니다.
  2. .dequeue(): 큐에서 첫 번째 작업을 실행하고, 큐에서 제거합니다.
  3. .clearQueue(): 큐에 대기 중인 작업을 모두 삭제합니다.
  4. .stop(): 진행 중인 애니메이션을 멈추고, 큐에 있는 대기 중인 애니메이션을 제거하거나, 즉시 끝내는 옵션을 설정할 수 있습니다.

큐 예제

1. 큐의 기본 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 큐 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>

    <div id="box"></div>
    <button id="start">애니메이션 시작</button>

    <script>
        $(document).ready(function() {
            // 큐에 애니메이션을 추가하고 실행
            $('#start').click(function() {
                $('#box')
                    .animate({left: '200px'}, 1000)  // 첫 번째 애니메이션
                    .animate({top: '200px'}, 1000) // 두 번째 애니메이션
                    .animate({left: '0px'}, 1000);   // 애니메이션 3
            });
        });
    </script>

</body>
</html>

위 예제에서 #box 요소는 left와 top 속성이 차례대로 애니메이션으로 변합니다. 이 두 애니메이션은 큐에 순차적으로 추가되고 하나씩 실행됩니다. 첫 번째 애니메이션이 끝나면 두 번째 애니메이션이 실행됩니다.

위 코드에서 #box 요소에 3개의 애니메이션이 큐에 추가됩니다.

큐 상태 (처리 전)
------------------------
| 애니메이션 1 | 애니메이션 2 | 애니메이션 3 |
------------------------

1. 애니메이션 1이 실행됩니다 (left: '200px'로 이동)
------------------------
| 애니메이션 2 | 애니메이션 3 |
------------------------

2. 애니메이션 2가 실행됩니다 (top: '200px'로 이동)
------------------------
| 애니메이션 3 |
------------------------

3. 애니메이션 3이 실행됩니다 (left: '0px'로 돌아감)
------------------------
|   (빈 공간) |
------------------------

2.  .dequeue() 사용 예제

dequeue() 예시

dequeue()는 큐에서 첫 번째 작업을 실행하고 제거하는 함수입니다.

$('#box').dequeue();  // 큐에서 첫 번째 애니메이션 실행

큐 상태가 변경되는 과정을 볼 수 있습니다:

큐 상태 (처리 전)
------------------------
| 애니메이션 1 | 애니메이션 2 | 애니메이션 3 |
------------------------

1. `dequeue()`를 호출하면 첫 번째 작업이 실행됩니다.
------------------------
| 애니메이션 2 | 애니메이션 3 |
------------------------

 

queue()와 dequeue()예제 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 큐 메서드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>

    <div id="box"></div>
    <button id="start">애니메이션 시작</button>
    <button id="next">다음 애니메이션 실행</button>

    <script>
        $(document).ready(function() {
            // 애니메이션 시작 버튼 클릭 시 큐에 작업 추가
            $('#start').click(function() {
                $('#box')
                    .queue(function(next) {        // 큐에 작업 추가
                        $('#box').animate({left: '200px'}, 1000);
                        next();  // 작업이 끝나면 다음으로 넘어감
                    })
                    .queue(function(next) {
                        $('#box').animate({top: '200px'}, 1000);
                        next();  // 다음 작업으로 넘어감
                    });
            });

            // '다음 애니메이션 실행' 버튼 클릭 시 큐에서 첫 번째 작업 실행
            $('#next').click(function() {
                $('#box').dequeue();  // 큐에서 첫 번째 작업 실행
            });
        });
    </script>

</body>
</html>

이 예제에서는 queue() 메서드를 사용하여 애니메이션을 큐에 넣습니다. next()를 호출하여 각 애니메이션이 완료된 후 다음 작업으로 넘어갑니다. dequeue() 메서드를 사용하여 큐에서 첫 번째 작업을 실행할 수도 있습니다.

3. clearQueue() 예제

clearQueue()는 큐에 대기 중인 모든 작업을 제거합니다.

$('#box').clearQueue();  // 큐에서 모든 작업 제거

큐 상태가 변경되는 과정은 다음과 같습니다:

큐 상태 (처리 전)
------------------------
| 애니메이션 1 | 애니메이션 2 | 애니메이션 3 |
------------------------

1. `clearQueue()`를 호출하면 큐에 대기 중인 모든 작업이 제거됩니다.
------------------------
|   (빈 공간) |
------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearQueue 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
        }
    </style>
</head>
<body>

    <div id="box"></div>
    <button id="start">애니메이션 시작</button>
    <button id="clear">큐 비우기</button>

    <script>
        $(document).ready(function() {
            $('#start').click(function() {
                $('#box')
                    .animate({left: '500px'}, 2000)
                    .animate({top: '200px'}, 2000)
                    .animate({left: '0px'}, 2000);
            });

            $('#clear').click(function() {
                $('#box').clearQueue();  // 큐에 대기 중인 애니메이션을 모두 삭제
            });
        });
    </script>

</body>
</html>

이 예제에서 clearQueue()를 사용하면 #box 요소의 큐에 대기 중인 모든 애니메이션을 삭제할 수 있습니다. 이 버튼을 클릭하면 큐에 대기 중인 애니메이션이 취소됩니다.

큐의 주요 사용 사례

  1. 연속적인 애니메이션: 여러 애니메이션이 순차적으로 실행될 때 사용됩니다.
  2. 큐 관리: dequeue()와 clearQueue() 등을 사용하여 큐에 있는 작업을 수동으로 관리할 수 있습니다.
  3. 애니메이션 중단 및 제어: stop()과 함께 큐를 관리하여 애니메이션을 제어하거나 중단할 수 있습니다.

결론

  • 큐는 작업이 순차적으로 처리되는 대기열입니다.
  • 선입선출(FIFO) 방식으로, 먼저 들어온 작업이 먼저 처리됩니다.
  • jQuery에서 애니메이션이 큐에 들어가면, 각 애니메이션은 큐에서 차례대로 실행됩니다.
  • dequeue()와 clearQueue()를 사용하여 큐에 있는 작업을 제어할 수 있습니다.

큐의 개념을 통해, 여러 애니메이션이나 비동기 작업이 어떻게 처리되는지 명확히 이해할 수 있습니다.

jQuery의 큐는 비동기 애니메이션이나 효과를 순차적으로 처리하는 중요한 도구입니다. 이를 통해 여러 애니메이션이 중첩되지 않고, 지정된 순서대로 실행되도록 보장할 수 있습니다. 큐를 잘 활용하면 복잡한 애니메이션 작업을 효율적으로 처리할 수 있습니다.

저작자표시 비영리 변경금지

'JQUERY' 카테고리의 다른 글

each메서드  (0) 2023.07.05
항상 최신 jquery 사용  (0) 2023.07.05
waypoint 활용 스크롤 위치에 따른 애니메이션 만들기  (0) 2023.07.05
jquery 시작 ready,onload차이점  (0) 2023.06.27

'JQUERY'의 다른글

  • 현재글queue()

관련글

티스토리툴바