Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Чем "dequeue после queue" отличается от "dequeue внутри queue". (https://javascript.ru/forum/jquery/31332-chem-dequeue-posle-queue-otlichaetsya-ot-dequeue-vnutri-queue.html)

lancer 03.09.2012 20:58

Чем "dequeue после queue" отличается от "dequeue внутри queue".
 
Выручайте. Не могу найти по этому моменту хоть какую-то каплю информации.

Чем "dequeue после queue" отличается от "dequeue внутри queue".

На такой "dequeue после queue" я наткнулся разбирая один пример пользовательской анимации, вот если локально, автор пишет.
Цитата:

Nothing happens. Why? Because unlike the default fx queue, custom queues are not dequeued immediately. They require an explicit dequeue call to get them started.

И предлагает свой же примерчик уже с dequeue.
$("#foo").queue("custom", function(next) {
    alert("I was queued!");
    next();
})
.dequeue("custom");


Если здесь dequeue поставить внутри к $(this), то уже не работает. Т.е. видно какая-то особенность пользовательской очереди? Читаю эту статью чтобы как раз понять пользовательскую очередь, поэтому самостоятельно ответ дать не могу.

И получается, если
Цитата:

custom queues are not dequeued immediately
, то fx-очереди разочередиваются сами. Но это же неверно, их всегда надо разочередивать, чтобы остальные эффекты продолжались.

Cама статейка вот http://cdmckay.org/blog/2010/06/22/h...mation-queues/

melky 03.09.2012 22:12

до сих пор застряли на очередях?

ппц, не понимаю, как можно :)

попробую обьяснить, с самого начала.

у нас есть, к примеру, три функции.
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 - то же самое, только другими словами. Суть не меняется :)

lancer 04.09.2012 14:47

Возможно все :) Это вам хорошо, знаете, что по аналогии с JS устроено.
Большое спасибо за примеры!


Часовой пояс GMT +3, время: 04:37.