Добрый вечер!
На странице имеются несколько скрытых блоков с классами, допустим, a1, b3, c4 и т.п.
Есть ajax-запрос, который получает от скрипта-обработчика строку вида: "a11b31c42", где a11 - класс/таймаут показа.
Получается, что а11 означает, что блок с классом а1 должен быть показан одну секунду, блок b3 - 1 секунду, блок с4 - 2 секунды.
Эти данные передаются в функцию: myFunction(x1,t1,x2,t2,x3,t3), где x1, x2, x3 - классы блоков, а t1, t2, t3 - таймауты блоков.
Функция такая:
function myFunction(x1,t1,x2,t2,x3,t3){
$(x1).fadeIn(t1*500,function(){
$(x1).fadeOut(t1*500,function(){
$(x2).fadeIn(t2*500,function(){
$(x2).fadeOut(t2*500,function(){
$(x3).fadeIn(t3*500,function(){
$(x3).fadeOut(t3*500,function(){
myFunction(x1,t1,x2,t2,x3,t3)
});
});
});
});
});
});
}
Скрипт отрабатывает правильно, блоки появляются/исчезают, но при нажатии на кнопку, когда снова срабатывает ajax-запрос, он получает строку такого же вида, но с другими параметрами.
Допустим:
в первый раз было: a11b31c42
во второй: a57b31c92
в третий будет: a24b68c54
Проблема в том, что после передачи значений №2 продолжают отображаться прошлые блоки, которые приходили в значениях №1 и тут начинается каша
Пробовал удалять x1,t1,x2,t2,x3,t3 перед передачей следующих значений - не помогло.
Пробовал останавливать функцию перед передачей следующих значений - не помогло, либо делал что-то неправильно.
Не знаю как иначе реализовать подобный функционал, подскажите, пожалуйста или дайте ссылку на наводящую статью/информацию.