Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.02.2019, 22:40   #1
begovik
Пользователь
 
Аватар для begovik
 
Регистрация: 08.03.2010
Сообщений: 48
По умолчанию Код выполняется "не по порядку"

Здравствуйте.
У меня простой код, который должен делать картинку невидимой, менять ссылку на картинку и делать уже другую картинку видимой.
Но код сначала меняет ссылку, а потом скрывает и показывает замененную картинку. Подскажите, в чём дело...
Код:
$("nav").on("click", "div", function () {
   $(".photo img").fadeTo(400, 0);
   $(this).addClass("current").siblings().removeClass("current");
   $(".photo img").attr("src", $(this).attr("link"));
   $(".photo img").fadeTo(400, 1);
   return false;
})
Спасибо.
begovik вне форума Ответить с цитированием
Старый 09.02.2019, 00:26   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Потому что анимация — это асинхронная операция. Она не будет блокировать синхронные действия.
Почитай доку jQuery, у них для любой анимации есть колбэк, который выполнится по её завершении.
Если вкратце: .fadeTo, (он же сокращение для .animate, но без указания точной функции преобразования), говорит как бы: "смотри, вот тебе 400 миллисекунд, сделай мне за них из `этого` — `это`", и jQuery запускает рекурсивную серию setTimeout, которые осуществляют изменение параметров раз в ~20мс. (я это знаю, потому что сам переписывал jQ.animate на более прогрессивный requestAnimationFrame)
Любой асинхронный таймаут ставит выполнение своей функции (колбэка) в асинхронную очередь на определенный промежуток времени. И пока до очереди этого промежутка не дойдет очередь (делаешь сеттаймаут с алертом, а после него while(1)), он не запустится (с while(1) alert не сработает никогда). синхронное выполнение программы заблокирует все ресурсы браузера.
Один из банальнейших вопросов на собеседованиях уже лет 10:
Код:
for (var i = 0; i < 5; i++) {
  setTimeout(function(){
    console.log(i);
  },0)
}
что выведет браузер и почему.
Почитай про асинхронку, посмотри лекции ШРИ Яндекса, учебник Ильи Кантора.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 09.02.2019, 01:37   #3
begovik
Пользователь
 
Аватар для begovik
 
Регистрация: 08.03.2010
Сообщений: 48
По умолчанию

А-хах! Спасибо, Naive, ты настоящий программер, дал ответ на поставленный вопрос) (я без сарказма).
Но как же переделать код, чтоб он выполнялся по задуманному алгоритму, я это имел в виду, создавая тему?
Я понемногу развиваюсь, в изучении JS, и когда-нибудь дойду до понимания этих глубин, но сейчас мне просто нужно чтоб код выполнил то, что я задумал.

P.S.
В выражениях jQ.animate и requestAnimationFrame я понимаю только то, что они оба работают с анимацией.
begovik вне форума Ответить с цитированием
Старый 09.02.2019, 07:18   #4
p51x
Старожил
 
Регистрация: 15.02.2010
Сообщений: 15,695
По умолчанию

Так вам же написали - добавьте код, который должен выполняться после анимации в коллбек для fadeTo.
p51x на форуме Ответить с цитированием
Старый 09.02.2019, 13:24   #5
begovik
Пользователь
 
Аватар для begovik
 
Регистрация: 08.03.2010
Сообщений: 48
По умолчанию

А, понятно, я не знал, что для него можно дописывать третий параметр.
Спасибо ребят, всё получилось.
begovik вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать папки "Pictures", "Music", "Видео", "Downloads" из "МОЙ КОМПЬЮТЕР" Бахтиёр1916 Windows 1 05.04.2017 12:53
Нужно пояснить/прокомментировать код программы, или коды функций "Добавить" "Удалить" "Обновить(редактировать" "Поиск" "Период") ZIRASS PHP 4 15.06.2016 14:23
Создать класс "Вентилятор" содержащий в себе классы: "Двигатель", "Контроллер", "Пульт управления" link90 Общие вопросы C/C++ 2 27.03.2016 12:34