Чем "dequeue после queue" отличается от "dequeue внутри queue".
Выручайте. Не могу найти по этому моменту хоть какую-то каплю информации.
Чем "dequeue после queue" отличается от "dequeue внутри queue". На такой "dequeue после queue" я наткнулся разбирая один пример пользовательской анимации, вот если локально, автор пишет. Цитата:
И предлагает свой же примерчик уже с dequeue. $("#foo").queue("custom", function(next) { alert("I was queued!"); next(); }) .dequeue("custom"); Если здесь dequeue поставить внутри к $(this), то уже не работает. Т.е. видно какая-то особенность пользовательской очереди? Читаю эту статью чтобы как раз понять пользовательскую очередь, поэтому самостоятельно ответ дать не могу. И получается, если Цитата:
Cама статейка вот http://cdmckay.org/blog/2010/06/22/h...mation-queues/ |
до сих пор застряли на очередях?
ппц, не понимаю, как можно :) попробую обьяснить, с самого начала. у нас есть, к примеру, три функции. function one () { alert("Первая"); } function two () { alert("Вторая"); } function three () { alert("Третья"); } есть такая фича - исполнение функций одна за другой. если функции синхронные, то проблем нет - можно вызвать их одну за другой. function one () { alert("Первая"); } function two () { alert("Вторая"); } function three () { alert("Третья"); } one(); two(); three(); ежели нет, то попытка вызвать их одну за другой, как обычно, не увенчается успехом : function one () { setTimeout(function () { alert("Первая"); }, 1000); } function two () { setTimeout(function () { alert("Вторая"); }, 500); } function three () { setTimeout(function () { alert("Третья"); }, 600); } one(); two(); three(); т.е. порядок будет нарушен. для этого вводят паттерн очередей. function Queue () { this.functions = []; this.current = 0; } Queue.prototype.next = function () { var func = this.functions.shift(); if (func) { func.call(window, this); } }; Queue.prototype.add = function (func) { this.functions.push(func); }; Queue.prototype.launch = function () { this.next(); }; с помощью него функция сама скажет, когда она закончила выполнение, и только после этого следующая на очереди функция начнёт выполняться. "сказать", что она выполнилась, она сможет, вызвав метод next своего первого аргумента. перепишем чутка прошлый пример, чтобы он работал на очередях : function Queue () { this.functions = []; this.current = 0; } Queue.prototype.next = function () { var func = this.functions.shift(); if (func) { func.call(window, this); } }; Queue.prototype.add = function (func) { this.functions.push(func); }; Queue.prototype.launch = function () { this.next(); }; function one (queue) { setTimeout(function () { alert("Первая"); queue.next(); // закончила выполнение. }, 1000); } function two (queue) { setTimeout(function () { alert("Вторая"); queue.next(); }, 500); } function three (queue) { setTimeout(function () { alert("Третья"); queue.next(); }, 600); } var myQueue = new Queue(); myQueue.add(one); myQueue.add(two); myQueue.add(three); myQueue.launch(); замечательно - теперь они выполняются в строго определённом порядке - по порядку добавления (метод add). теперь перейдём от абстрактного примера к jQuery. исходный код метода queue : <script src="http://code.jquery.com/jquery-1.8.1.js"></script> <script> document.write("<pre>" + $.queue + "</pre>"); </script> и dequeue : <script src="http://code.jquery.com/jquery-1.8.1.js"></script> <script> document.write("<pre>" + $.dequeue + "</pre>"); </script> детально обьяснять я их не буду, но скажу то, что мой код сверху, и их, очень похожи, за одним "НО" - у них поддерживаются несколько очередей, а у меня - одна. теперь я добавлю в свою реализацию поддержку нескольких очередей, используя обёртку над прошлым скриптом : function Queue () { this.functions = []; this.current = 0; } Queue.prototype.next = function () { var func = this.functions.shift(); if (func) { func.call(window, this); } }; Queue.prototype.add = function (func) { this.functions.push(func); }; Queue.prototype.launch = function () { this.next(); }; function NamedQueue () { this.queues = {}; } NamedQueue.prototype.add = function (name, func) { if (!this.queues[name]) { this.queues[name] = new Queue(); } this.queues[name].add(func); }; NamedQueue.prototype.launch = function (name) { this.queues[name].launch(); }; var myQueue = new NamedQueue(); myQueue.add("first", function (queue) { setTimeout(function () { alert("Первая функция, первая очередь."); queue.next(); }, 210); }); myQueue.add("second", function (queue) { setTimeout(function () { alert("Первая функция, вторая очередь."); queue.next(); }, 300); }); myQueue.add("first", function (queue) { setTimeout(function () { alert("Вторая функция, первая очередь."); queue.next(); }, 170); }); myQueue.add("second", function (queue) { setTimeout(function () { alert("Вторая функция, вторая очередь."); queue.next(); }, 240); }); myQueue.add("first", function (queue) { setTimeout(function () { alert("Третья функция, первая очередь."); queue.next(); }, 90); }); myQueue.add("second", function (queue) { setTimeout(function () { alert("Третья функция, вторая очередь."); queue.next(); }, 150); }); myQueue.launch("first"); myQueue.launch("second"); в jQuery - то же самое, только другими словами. Суть не меняется :) |
Возможно все :) Это вам хорошо, знаете, что по аналогии с JS устроено.
Большое спасибо за примеры! |
Часовой пояс GMT +3, время: 04:37. |