[JQUERY] jQuery를에 큐은 무엇입니까?
JQUERYjQuery를에 큐은 무엇입니까?
해결법
-
1.jQuery를의 큐는 애니메이션에 사용됩니다. 당신은 당신이 원하는 용도로 사용할 수 있습니다. 그들은 jQuery.data를 사용하여, ()을 당 요소별로 저장된 함수의 배열이다. 그들은 선입 선출 (FIFO)입니다. .dequeue를 사용하여 기능을 당신은 .queue ()를 호출하여 큐에 기능을 추가 할 수 있습니다, 당신은 (전화로)를 제거 ().
jQuery를의 큐는 애니메이션에 사용됩니다. 당신은 당신이 원하는 용도로 사용할 수 있습니다. 그들은 jQuery.data를 사용하여, ()을 당 요소별로 저장된 함수의 배열이다. 그들은 선입 선출 (FIFO)입니다. .dequeue를 사용하여 기능을 당신은 .queue ()를 호출하여 큐에 기능을 추가 할 수 있습니다, 당신은 (전화로)를 제거 ().
소스를 읽고 예제를 찾고, 내부 jQuery를 큐 기능을 이해하는 것은 대단히 날 수 있습니다. 내가 본 큐 기능의 가장 좋은 예 중 하나는 .delay ()이다 :
$.fn.delay = function( time, type ) { time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type = type || "fx"; return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); }); };
jQuery를의 기본 큐 FX입니다. 기본 큐는 다른 큐와 공유되지 않는 어떤 특별한 속성이 있습니다.
참고 : 그들은 자동으로 시작되지 않습니다, 당신이해야 수동으로 .dequeue 사용자 정의 큐 () 함수를 사용하는 경우!
당신은 함수 인수없이 .queue ()를 호출하여 jQuery를 큐에 대한 참조를 검색 할 수 있습니다. 대기열에 얼마나 많은 항목을보고 싶다면 당신은 방법을 사용할 수 있습니다. 당신은 장소에 큐를 조작하는 이동, 취소], 팝, 푸시를 사용할 수 있습니다. 사용자는 .queue () 함수 배열을 통과하여 전체 큐를 대체 할 수있다.
빠른 예 :
// lets assume $elem is a jQuery object that points to some element we are animating. var queue = $elem.queue(); // remove the last function from the animation queue. var lastFunc = queue.pop(); // insert it at the beginning: queue.unshift(lastFunc); // replace queue with the first three items in the queue $elem.queue(queue.slice(0,3));
jsFiddle에 예를 실행
$(function() { // lets do something with google maps: var $map = $("#map_canvas"); var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; var geocoder = new google.maps.Geocoder(); var map = new google.maps.Map($map[0], myOptions); var resized = function() { // simple animation callback - let maps know we resized google.maps.event.trigger(map, 'resize'); }; // wait 2 seconds $map.delay(2000); // resize the div: $map.animate({ width: 250, height: 250, marginLeft: 250, marginTop:250 }, resized); // geocode something $map.queue(function(next) { // find stackoverflow's whois address: geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse); function handleResponse(results, status) { if (status == google.maps.GeocoderStatus.OK) { var location = results[0].geometry.location; map.setZoom(13); map.setCenter(location); new google.maps.Marker({ map: map, position: location }); } // geocoder result returned, continue with animations: next(); } }); // after we find stack overflow, wait 3 more seconds $map.delay(3000); // and resize the map again $map.animate({ width: 500, height: 500, marginLeft:0, marginTop: 0 }, resized); });
jsFiddle에 예를 실행
var theQueue = $({}); // jQuery on an empty object - a perfect queue holder $.each([1,2,3],function(i, num) { // lets add some really simple functions to a queue: theQueue.queue('alerts', function(next) { // show something, and if they hit "yes", run the next function. if (confirm('index:'+i+' = '+num+'\nRun the next function?')) { next(); } }); }); // create a button to run the queue: $("<button>", { text: 'Run Queue', click: function() { theQueue.dequeue('alerts'); } }).appendTo('body'); // create a button to show the length: $("<button>", { text: 'Show Length', click: function() { alert(theQueue.queue('alerts').length); } }).appendTo('body');
내가 $ .ajaxQueue을 개발 () 플러그인이 사용하는 $ .Deferred, .queue () 및 $ 아약스 ()는 때 요청 완료를 해결 약속을 다시 전달합니다. 아직도 1.4에서 작동 $ .ajaxQueue의 또 다른 버전은 시퀀싱 Ajax 요청에 대한 내 대답에 게시
/* * jQuery.ajaxQueue - A queue for ajax requests * * (c) 2011 Corey Frang * Dual licensed under the MIT and GPL licenses. * * Requires jQuery 1.5+ */ (function($) { // jQuery on an empty object, we are going to use this as our Queue var ajaxQueue = $({}); $.ajaxQueue = function( ajaxOpts ) { var jqXHR, dfd = $.Deferred(), promise = dfd.promise(); // queue our ajax request ajaxQueue.queue( doRequest ); // add the abort method promise.abort = function( statusText ) { // proxy abort to the jqXHR if it is active if ( jqXHR ) { return jqXHR.abort( statusText ); } // if there wasn't already a jqXHR we need to remove from queue var queue = ajaxQueue.queue(), index = $.inArray( doRequest, queue ); if ( index > -1 ) { queue.splice( index, 1 ); } // and then reject the deferred dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] ); return promise; }; // run the actual query function doRequest( next ) { jqXHR = $.ajax( ajaxOpts ) .done( dfd.resolve ) .fail( dfd.reject ) .then( next, next ); } return promise; }; })(jQuery);
지금 learn.jquery.com에 대한 기사로이 추가 한 큐, 이동 모습에 대한 해당 사이트에 다른 훌륭한 기사가있다.
-
2.큐 방법을 이해하기 위해서는 jQuery를 애니메이션을 수행하는 방법을 이해해야합니다. 당신이 다른 후 여러 애니메이션 메서드 호출 하나를 작성하는 경우, jQuery를은 '내부'큐를 생성하고 이러한 메소드 호출을 추가합니다. 그런 다음 그 애니메이션 통화를 하나씩 실행합니다.
큐 방법을 이해하기 위해서는 jQuery를 애니메이션을 수행하는 방법을 이해해야합니다. 당신이 다른 후 여러 애니메이션 메서드 호출 하나를 작성하는 경우, jQuery를은 '내부'큐를 생성하고 이러한 메소드 호출을 추가합니다. 그런 다음 그 애니메이션 통화를 하나씩 실행합니다.
다음 코드를 고려하십시오.
function nonStopAnimation() { //These multiple animate calls are queued to run one after //the other by jQuery. //This is the reason that nonStopAnimation method will return immeidately //after queuing these calls. $('#box').animate({ left: '+=500'}, 4000); $('#box').animate({ top: '+=500'}, 4000); $('#box').animate({ left: '-=500'}, 4000); //By calling the same function at the end of last animation, we can //create non stop animation. $('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation); }
'큐'/ '디큐'방법이 '애니메이션 큐'를 통해 제어 할 수 있습니다.
기본적으로 애니메이션 큐는 'FX'이다. 나는 큐 방법을 사용할 수있는 방법을 설명합니다 다양한 예제를 가지고 여기에 샘플 페이지를 만들었습니다.
http://jsbin.com/zoluge/1/edit?html,output
위의 샘플 페이지에 대한 코드 :
$(document).ready(function() { $('#nonStopAnimation').click(nonStopAnimation); $('#stopAnimationQueue').click(function() { //By default all animation for particular 'selector' //are queued in queue named 'fx'. //By clearning that queue, you can stop the animation. $('#box').queue('fx', []); }); $('#addAnimation').click(function() { $('#box').queue(function() { $(this).animate({ height : '-=25'}, 2000); //De-queue our newly queued function so that queues //can keep running. $(this).dequeue(); }); }); $('#stopAnimation').click(function() { $('#box').stop(); }); setInterval(function() { $('#currentQueueLength').html( 'Current Animation Queue Length for #box ' + $('#box').queue('fx').length ); }, 2000); }); function nonStopAnimation() { //These multiple animate calls are queued to run one after //the other by jQuery. $('#box').animate({ left: '+=500'}, 4000); $('#box').animate({ top: '+=500'}, 4000); $('#box').animate({ left: '-=500'}, 4000); $('#box').animate({ top: '-=500'}, 4000, nonStopAnimation); }
나는이 큐 귀찮게해야하는 이유를 이제 당신은 요청할 수 있습니다? 일반적으로, 당신은 못해. 당신이 컨트롤을 원하는 복잡한 애니메이션 시퀀스가 있다면, 그때 큐 / 디큐 방법은 당신의 친구입니다.
또한 복잡한 애니메이션 시퀀스를 만드는 방법에 대해 jQuery를 그룹에서이 흥미로운 대화를 참조하십시오.
http://groups.google.com/group/jquery-en/browse_thread/thread/b398ad505a9b0512/f4f3e841eab5f5a2?lnk=gst
애니메이션의 데모 :
http://www.exfer.net/test/jquery/tabslide/
그래도 질문이 있으면 알려주세요.
-
3.여기서 대기열에 여러 개체 애니메이션의 간단한 예이다.
여기서 대기열에 여러 개체 애니메이션의 간단한 예이다.
JQuery와 우리가 이상 하나의 객체를 큐 할 수 있습니다. 그러나 애니메이션 함수 내에서 우리는 다른 개체에 액세스 할 수 있습니다. 이 예에서 우리는 애니 메이팅 # BOX1 및 #의 BOX2 오브젝트 동안 #Q 객체를 통해 우리의 큐를 구축 할 수 있습니다.
함수의 배열로 큐 생각. 그래서 당신은 배열로 큐를 조작 할 수 있습니다. 당신은 큐를 조작하는 이동, 취소], 팝, 푸시를 사용할 수 있습니다. 이 예에서 우리는 애니메이션 대기열에서 마지막 기능을 제거하고 시작 부분에 삽입합니다.
우리가 완료되면, 우리는 대기열에서 제외 () 함수에 의해 애니메이션 큐를 시작합니다.
jsFiddle에서보기
HTML :
<button id="show">Start Animation Queue</button> <p></p> <div id="box1"></div> <div id="box2"></div> <div id="q"></div>
JS :
$(function(){ $('#q').queue('chain',function(next){ $("#box2").show("slow", next); }); $('#q').queue('chain',function(next){ $('#box1').animate( {left: 60}, {duration:1000, queue:false, complete: next} ) }); $('#q').queue('chain',function(next){ $("#box1").animate({top:'200'},1500, next); }); $('#q').queue('chain',function(next){ $("#box2").animate({top:'200'},1500, next); }); $('#q').queue('chain',function(next){ $("#box2").animate({left:'200'},1500, next); }); //notice that show effect comes last $('#q').queue('chain',function(next){ $("#box1").show("slow", next); }); }); $("#show").click(function () { $("p").text("Queue length is: " + $('#q').queue("chain").length); // remove the last function from the animation queue. var lastFunc = $('#q').queue("chain").pop(); // insert it at the beginning: $('#q').queue("chain").unshift(lastFunc); //start animation queue $('#q').dequeue('chain'); });
CSS :
#box1 { margin:3px; width:40px; height:40px; position:absolute; left:10px; top:60px; background:green; display: none; } #box2 { margin:3px; width:40px; height:40px; position:absolute; left:100px; top:60px; background:red; display: none; } p { color:red; }
-
4.그것은이 대신에, 당신은 예를 들어 ... 애니메이션을 대기 할 수 있습니다
그것은이 대신에, 당신은 예를 들어 ... 애니메이션을 대기 할 수 있습니다
$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);
어떤 요소를 페이드와 동시에 폭 100 픽셀한다. 큐를 사용하면 애니메이션을 무대 할 수 있습니다. 일 명 마감 다른 사람 후에 그래서.
$("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); 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); } runIt();
http://docs.jquery.com/Effects/queue에서 예
-
5.이 스레드는 나에게 내 문제에 많은 도움이,하지만 난 다른 방식으로 $ .queue을 사용하고 내가 여기에 와서 무엇을 게시 할 것이라고 생각했습니다. 내가 필요로하는 이벤트 (프레임)의 순서가 트리거 될했지만, 순서는 동적으로 구축 할 수 있습니다. I는 이미지 애니메이션 시퀀스를 포함한다, 각각의 가변 자리 번호를 갖는다. 배열을 통한 I 루프 이런 플레이스 홀더의 각각에 대한 각 시퀀스를 구축 할 수 있도록 데이터는, 배열의 배열에 유지된다 :
이 스레드는 나에게 내 문제에 많은 도움이,하지만 난 다른 방식으로 $ .queue을 사용하고 내가 여기에 와서 무엇을 게시 할 것이라고 생각했습니다. 내가 필요로하는 이벤트 (프레임)의 순서가 트리거 될했지만, 순서는 동적으로 구축 할 수 있습니다. I는 이미지 애니메이션 시퀀스를 포함한다, 각각의 가변 자리 번호를 갖는다. 배열을 통한 I 루프 이런 플레이스 홀더의 각각에 대한 각 시퀀스를 구축 할 수 있도록 데이터는, 배열의 배열에 유지된다 :
/* create an empty queue */ var theQueue = $({}); /* loop through the data array */ for (var i = 0; i < ph.length; i++) { for (var l = 0; l < ph[i].length; l++) { /* create a function which swaps an image, and calls the next function in the queue */ theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();")); /* set the animation speed */ theQueue.delay(200,'anim'); } } /* start the animation */ theQueue.dequeue('anim');
함수가 루프에서 변수를 사용하여 동적으로 쓸 수있는이 방법 (- 이것은 내가에 도착했습니다 스크립트의 단순화 된 버전이지만, 원칙을 보여 주어야한다 - 함수가 큐에 추가 될 때,이 기능 생성자를 사용하여 추가 에스). 함수가 다음 () 호출의 인수를 전달하는 방법을 참고, 이것은 마지막에 호출됩니다. 나는 $ .delay를 사용하여 프레임을 비틀이 경우의 기능은, 시간 의존성을 (그것이 $ .fadeIn 또는 같은 것을 사용하지 않습니다)이 없습니다.
-
6.makeRed 기능 및 사용 makeBlack 대기열 디큐 서로를 실행한다. 이 효과는, 연속적으로 '#wow'소자의 점멸이다.
makeRed 기능 및 사용 makeBlack 대기열 디큐 서로를 실행한다. 이 효과는, 연속적으로 '#wow'소자의 점멸이다.
<html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#wow').click(function(){ $(this).delay(200).queue(makeRed); }); }); function makeRed(){ $('#wow').css('color', 'red'); $('#wow').delay(200).queue(makeBlack); $('#wow').dequeue(); } function makeBlack(){ $('#wow').css('color', 'black'); $('#wow').delay(200).queue(makeRed); $('#wow').dequeue(); } </script> </head> <body> <div id="wow"><p>wow</p></div> </body> </html>
from https://stackoverflow.com/questions/1058158/what-are-queues-in-jquery by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] jQuery로 단어를 강조 (0) | 2020.09.25 |
---|---|
[JQUERY] 텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다 (0) | 2020.09.25 |
[JQUERY] 관리 jQuery를 플러그인 의존성에 웹팩 (0) | 2020.09.25 |
[JQUERY] 상위 이벤트를 트리거 JQuery와 정지 아이 (0) | 2020.09.25 |
[JQUERY] 어떻게 자식 앵커를 클릭하면 발사에서 부모의 온 클릭 이벤트를 방지합니까? (0) | 2020.09.25 |