[jQuery] queue() & dequeue()

1. queue(), 대기열의 함수와 대기열 조작하기

queue([queueName]) Return : Array

요소에 실행되고 있는 함수의 큐를 보여준다.
- queueName :: 큐명 문자열, 기본값은 fx이며, 기본 효과 큐를 의미한다.
무슨 함수들이 실행되고 있는지 보여준다.

<head>
  <style>
    div {
      margin: 3px; width: 40px; height: 40px; 
      position: absolute; left: 0px; top: 40px;
      background: green; display: none;
    }
    div.newcolor {
      background: blue;
    }
  </style>
</head>
<body>
  <p>The queue is length is: <span></span></p>
  <div></div>
  
  <script>
var div = $('div');

function runIt() {
  div
    .show('slow')
    .animate({left: '+=200'}, 2000)
    .slideToggle(1000)
    .slideToggle('fast')
    .animate({left: '-=200'}, 1500)
    .hide('slow')
    .show(1200)
    .slideUp('normal', runIt)
}

function showIt() {
  var n = div.queue('fx');
  $('span').text(n.length);
  setTimeout(showIt, 100);
}
runIt();
showIt();
  </script>
</body>

<span>에는 div가 움직이는 갯수를 보여준다. ('span').text(n)만 하면 runIt()에서 움직이는 queue를 볼 수 있다.

$div.slideUp('normal' , runIt)은 계속 반복하도록 도와준다.

queue([queueName], newQueue) Return : jQuery

요소에 실행되고 있는 함수 큐를 조작하기
- queueName : Type : String / 큐명 문자열, 기본값은 fx이며 기본효과 큐를 의미.
- newQueue :: Type : Array / 현재 큐를 대체할 함수 배열.

queue([queueName], callback(next))

callback :: Type : Function( Function next() ) / 큐에 추가될 새로운 함수. 함수가 호출되면 큐에 있는 다음 아이템이 큐에서 제거.

모든 요소는 jQuery에 의해 자체 함수들을 큐의 형태로 지니게 된다. 대부분의 어플리케이션은 단 하나의 큐(fx라고 하는)를 사용하게 된다.

큐는 순서에 의해 액션한다. 하나의 요소에 다수의 애니메이션 함수를 실행시키는 방법이 일반적인 예이다.

$('#foo').slideUp().fadeIn();

이 코드가 실행되면 요소는 슬라이딩 시작하고 슬라이딩이 완료되면 페이드 변화가 일어나게 된다.

queue() 함수는 직접적으로 함수의 대기열(큐)를 조작할 수 있다.

queue()를 이용하여 콜백하는 방법은 특이한 사용법으로 큐의 끝에 새로운 함수를 추가해 넣을 수 있게 된다.

이런 방법은 애니메이션 함수들에 콜백함수를 사용하는 것과 유사하다.

[예제] :: 애니메이션함수와 queue(callback) 은 유사하다.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

위 코드는 아래와 같다.

$('#foo').slideUp(function() {
  alert('Animation complete.');
})

$('#foo')가 slideUp() 을 한 후에 alert을 출력한다. (한번만 실행)

.queue() 로 함수를 추가할 때 .dequeue() 가 결국 호출되어 라인의 다음 함수가 실행되도록 해야한다.

jQuery 1.4부터는 첫번째 인자로 또다른 함수를 전달할 수 있게 되었다. 이러 식으로 사용하며 자동적으로 큐에 있는 다음 함수가 큐에서 제거되게 된다.

$('#test').queue(function() {
  // Do some default..
  next();
});

[예제] :: 큐를 조작해보자.

<head>
  <style>
    div {
      margin: 3px; width: 40px; height: 40px; 
      position: absolute; left: 0px; top: 40px;
      background: green; display: none;
    }
    div.newcolor {
      background: blue;
    }
  </style>
</head>
<body>
  Click here..
  <div></div>
  
  <script>
  $(document.body).click(function() {
  $('div')
    .show('slow')
    .aniamte({ left: '+=200'}, 2000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({ left: '-=200'}, 500)
    .queue(function() {
      $(this).removeClas('newcolor').dequeue();
    })
    .slideUp();
  })	
  </script>
</body>

[예제] :: 큐 배열을 세팅하여 큐를 제거해보자.

<head>
  <style>
    div {
      margin: 3px; width: 40px; height: 40px; 
      position: absolute; left: 0px; top: 40px;
      background: green; display: none;
    }
    div.newcolor {
      background: blue;
    }
  </style>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
  <script>
$('#start').click(function() {
  $('div')
    .show('slow')
    .animate({ left: '+=200'}, 5000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({ left: '-=200'}, 1500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});
    
$('#stop').click(function() {
    $('div').queue('fx', []).stop();
});
  </script>
</body>

queue('fx' ,[]) fx는 기본효과 큐, [] 현재 큐를 대체할 함수배열

stop버튼을 누르면 그 위치에서 정지되었다가 start버튼 누르면 모든 애니메이션을 완료한다. 다시 start버튼을 누르면 정지되었던 위치에서 다시 움직인다.

2. dequeue(), 대기열의 다음 함수 실행

dequeue([queueName]) Return : jQuery

dequeue()함수가 호출되면 큐에서 빠져나와 다음 함수를 실행한다.
큐에서 빠져나와 다음 상황으로 진행하고 싶을 때사용.
queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지않게 연결해준다.dequeue() 가 없을 시 .animate({ left: '10px', top: '30px' }, 700); 가 실행되지 않는다.
<head> <style> div { margin: 3px; width: 50px; height: 50px; position: absolute; left: 10px; top: 30px; background: yellow; } div.red { background: red; } </style> </head> <body> <button>Start</button> <div></div> <script> $('button').click(function() { $('div') .animate({ left: '+=200'}, 2000) .animate({ top: '0px'}, 600) .queue(function() { $(this).toggleClass('red').dequeue(); }) .animate({ left: '10px', top: '30px' }, 700); }) </script> </body>

[jQuery] queue() & dequeue()

1. queue(), 대기열의 함수와 대기열 조작하기

2. dequeue(), 대기열의 다음 함수 실행

티스토리툴바