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

queue

.queue( [queueName] )Returns : Array

개요 : 요소에 실행되고 있는 함수의 큐를 보여줍니다. 무슨 함수들이 실행되고 있는지 보여줍니다.

.queue( [queueName] )
queueName 큐명 문자열. 기본값은 fx 이며, 기본 효과 큐를 의미합니다.

예 제
큐의 길이수를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <p>The queue length is: <span></span></p>
  <div></div>
<script>
var div = $("div");

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

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();
</script>

</body>
</html>

미리보기

음.. 이게 뭔가요. 혼자 열심히 돌아다니는 것 빼고 딱히 와닿는게 없습니다. 현재 실행되고 있는 함수의 인덱스 번호 정도이구요. n.length 에서 length 를 삭제시켜 보시고 한번 테스트 해 보세요. 깜짝 놀라실거예요.(사실 놀랄일은 아니에요. ^^;;)

.queue( [queueName] , newQueue )Returns : jQuery

개요 : 요소에 실행되고 있는 함수 큐를 조작하기.

.queue( [queueName], newQueue )
queueName 큐명 문자열. 기본값은 fx 이며, 기본 효과 큐를 의미합니다.
newQueue 현재 큐를 대체할 함수 배열.
.queue( [queueName], callback( next ) )
queueName 큐명 문자열. 기본값은 fx 이며, 기본 효과 큐를 의미합니다.
callback( next ) 큐에 추가될 새로운 함수, 함수가 호출되면 큐에 있는 다음 아이템이 큐에서 제거됩니다.

모든 요소는 jQuery에 의해서 자체에 함수들을 큐의 형태로 지니게 됩니다. 대부분의 어플리케이션은, 단 하나의 큐(fx라고 하는)를 사용하게 됩니다. 큐는 순서에 의해 액션이 이루어지게 됩니다. 하나의 요소에 다수의 애니메이션 함수를 실행시키는 방법이 이것에 대한 아주 일반적인 예가 되겠습니다. 마치 아래 예처럼 말입니다.

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

이 코드가 실행되면, 요소는 슬라이딩을 시작합니다. 슬라이딩이 완료되야 페이드 변화가 일어나게 되는 것입니다.

.queue() 함수는 직접적으로 함수의 대기열(큐)를 조작할 수 있습니다. .queue() 를 이용하여 콜백하는 것은 좀 특이한 사용법입니다. 이런 방식을 사용하면 큐의 끝에 새로운 함수를 추가해 넣을 수 있게 됩니다.

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

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

위 코드는 아래와 같습니다.

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

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

$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

예 제
큐를 조작해 봅니다.

<!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>
  Click here...
  <div></div>
<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>

</body>
</html>

미리보기

상당히 복잡합니다. 그냥 보고 넘어가시죠.

예 제
큐 배열을 세팅하여 큐를 제거해봅니다.

<!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 () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });</script>

</body>
</html>

미리보기

이것도 복잡하기만 합니다. 그냥 실행시켜 보시고 와~ 재밌다하고 넘어가세요.

이 함수는 해보긴 했지만 그리 유용해 보이진 않습니다. 애초에 이렇게 복잡한 내용이 있지도 않을 뿐더러 이런 식으로 짜지도 않겠죠. 그래도 이런 것도 있었다라고 알고 넘어가는 것과 모르는 것은 천지차이죠. 알고 있던 것과 몰랐던 것 마치, 전산에서의 0 과 1 처럼요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

'프로그래밍 > jQuery' 카테고리의 다른 글

slideUp(), 슬라이드 효과로 숨기기 (0)	2012.04.25
slideToggle(), 슬라이드 토글하기 (1)	2012.04.25
slideDown(), 슬라이드 효과로 보이기 (0)	2012.04.25
show(), 요소 보이게 하기 (0)	2012.04.25
hide(), 요소 숨기기 (2)	2012.04.19
jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (0)	2012.04.19
jQuery.fx.interval, 에니메이션 프레임 조절 (0)	2012.04.16
fadeToggle(), 페이드 인/아웃 토글 (0)	2012.04.16

즐거움을 찾자 Find Fun!!

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

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

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

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바