функция Jquery создает anomolous пауза

EDIT: создал скрипку, которая показывает проблему https://jsfiddle.net/MichaelCaley/wcoba1jy/функция Jquery создает anomolous пауза

Код ниже создает 7 секундную паузу между каждым замирания, пока мы не доберемся до конца, где код повторно запускает себя. По какой-то причине эта задержка составляет 14/15 секунд.

Я проделал много поисков, но придумал козырь, поэтому любая помощь приветствуется.

var imgshow = function(){ 
    $(".img1").delay(7000).fadeOut(1500, function(){ 
     $(".img2").delay(7000).fadeOut(1500, function(){ 
      $(".img1").delay(7000).fadeIn(1500, function(){ 
       $(".img2").delay(7000).fadeIn(1500, function(){ 
        imgshow(); 
       }); 
      }); 
     }); 
    }); 
} 
imgshow();

источник

2016-04-16 Michael Caley

Не похоже на проблему с вышеуказанным кодом. Проверьте http://jsfiddle.net/egnkgmwr/ (я ускорил его в 10 раз) - правый угол имеет секунды между вызовами. – potatopeelings

Привет Картофель, спасибо за отзыв. Посмотрев на свою скрипку, я решил посмотреть, смогу ли я воссоздать проблему, и у меня есть. https://jsfiddle.net/MichaelCaley/wcoba1jy/ вы увидите, что из второго цикла первый квадрат занимает больше времени, чтобы исчезнуть –

А. Я думаю, что вижу проблему - проверьте ответ. Ура! – potatopeelings

Это фактически функционирует как закодированное (но, вероятно, не так, как вы предполагали :-)). Что происходит, так это то, что 2-й fadeIn (визуально) не действует, потому что img2 находится под img1 (который полностью непрозрачен), заставляя img1 оставаться в два раза длиннее.

Будем надеяться, что следующий становится ясно, - 1 указывает полностью непрозрачным и 0 указывает на то полностью прозрачный

img3 (1) при Img2 (1) при Img1 (1) => img1 показано
img3 (1) под img2 (1) при img1 (0) => img2 показано
img3 (1) при img2 (0) при img1 (0) => img3 показано
img3 (1) при img2 (0) при img1 (1) => img1
img3 (1) под img2 (1) под img1 (1) => i mg1 показано на рисунке (если вы, вероятно, хотите Img2) ...

Если поменять местами последние 2 fadeIn, вы получите то, что меняет цвет в каждый интервал (https://jsfiddle.net/xx303tdc/), но последовательность будет img1, img2, img3 , img2, img1 ... В противном случае вы можете просто установить img2 полностью видимым после img1 fadeIn, а затем перезапустить цикл.

В любом случае, поскольку вы выполняете рекурсивный вызов, вы, в конечном счете, исчерпаете пространство стеков (очень медленно из-за задержки), поэтому может быть хорошей идеей реорганизовать использование переходов CSS.

источник

2016-04-16 10:43:07 potatopeelings

Вы совершенно правы, и даже до того, как я закончил читать ваш ответ, я мог видеть проблему. Что касается проблемы стеков, которую вы упомянули, это проблема с любой петлевой функцией? Или есть способ, которым я должен это делать? –

Его проблема с какой-либо рекурсивной функцией, которая не заканчивается, но я не знаю достаточно, чтобы окончательно сказать, что это будет проблемой в этом случае (задержка 7s обычно нормально. Предполагая, что пользователь не тратит часы на страница). В любом случае, если вы просто хотите изменить фон, вы можете сделать это с помощью чистого CSS - см. Https://jsfiddle.net/mrwq20ct/ – potatopeelings

функция Jquery создает anomolous пауза

ответ

Смежные вопросы