Как связать или поставить в очередь пользовательские функции, используя JQuery?
8 ответов
Код очереди jQuery не так хорошо документирован, как мог бы, но основная идея такова:
$("#some_element").queue("namedQueue", function() {
console.log("First");
var self = this;
setTimeout(function() {
$(self).dequeue("namedQueue");
}, 1000);
});
$("#some_element").queue("namedQueue", function() {
console.log("Second");
var self = this;
setTimeout(function() {
$(self).dequeue("namedQueue");
}, 1000);
});
$("#some_element").queue("namedQueue", function() {
console.log("Third");
});
$("#some_element").dequeue("namedQueue");
Если вы запустите этот код, вы увидите «Первый» в консоли, пауза в 1 с, увидеть «Секунду» в консоли, еще одна пауза в 1 с и, наконец, увидеть «Третью» в консоли.
Основная идея состоит в том, что вы можете иметь любое количество именованных очередей, привязанных к элементу. Вы удаляете элемент из очереди, вызывая dequeue . Вы можете делать это вручную сколько угодно раз, но если вы хотите, чтобы очередь запускалась автоматически, вы можете просто вызвать dequeue внутри функции очереди.
Все анимации в jQuery запускаются внутри очередь называется fx . Когда вы анимируете элемент, он автоматически добавляет новую анимацию в очередь и вызывает удаление из очереди, если в данный момент анимации не выполняются. Вы можете вставить свои собственные обратные вызовы в очередь fx , если хотите; вам просто нужно будет вручную вызвать dequeue в конце (как и при любом другом использовании очереди).
As far as animation interval already defined in 2000 ms, you can do second call with delay in 2000 ms:
One();
SetTimeout(function(){
Two();
}, 2000);
В одном из моих веб-проектов мне приходилось выполнять различные последовательности действий в зависимости от того, какое событие произошло. Я сделал это с помощью обратных вызовов (что-то вроде шаблона Visitor). Я создал объект для обертывания любой функции или группы действий. Затем я ставил эти обертки в очередь; массив работает нормально. Когда событие запускалось, я перебирал массив, вызывая специализированный метод моего объекта, который принимал обратный вызов. Этот обратный вызов побудил мою итерацию продолжить.
Чтобы обернуть функцию, вам необходимо знать функцию apply . Функция apply принимает объект в качестве области видимости и массив аргументов. Таким образом, вам не нужно ничего знать о функциях, которые вы переносите.
I would run the second as a callback function:
$('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
two();
});
which would run two() when first animation finishes, if you have more animations on timed queue for such cases i use jquery timer plugin instead setTimeout(), which comes very handy in some cases.
I'd create an array of functions and add every function you want to queue to it.
Then I'd append a function call which loops through the array and calls each function to the event through jQuery.
You could probably create a very simple plugin for jQuery that could handle this internally as well.
Assuming you want to keep One and Two as separate functions,
you could do something like this:
function One(callback) {
$('div#animateTest1').animate({ left: '+=200' }, 2000,
function(e) { callback(); });
}
function Two() {
$('div#animateTest2').animate({ width: '+=200' }, 2000);
}
// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
One(Two);
@TrippRitter должен прикрепить .call к обратному вызову
One = function(callback){
$('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
if(typeof callback == 'function'){
callback.call(this);
}
});
}
Two = function(){
$('div#animateTest2').animate({ width: '+=200' }, 2000);
}
One(function(){
Two();
});
, но это то же самое, что и следующее
$('div#animateTest1')
.animate({ left: '+=200' }, 2000,
function(){
Two();
});
Two = function(){
$('div#animateTest2').animate({ width: '+=200' }, 2000);
}
Следующее будет работать и не приведет к ошибке, если обратный вызов равен нулю:
function One(callback)
{
$('div#animateTest1').animate({ left: '+=200' }, 2000,
function()
{
if(callback != null)
{
callback();
}
}
);
}
function Two()
{
$('div#animateTest2').animate({ width: '+=200' }, 2000);
}
var callback = function(){ Two(); };
One(callback);