Как очистить эти setTimeouts при повторном вызове функции

поэтому у меня есть функция, которая запускает ту же анимацию в div при загрузке любой страницы/раздела.

Я заметил, что в то время как стрелки перемещаются к следующей позиции, и я меняю страницы (через запросы Ajax), стрелки продолжают анимировать с последней позиции.

Я нашел этот вопрос/ответ, но пока решение не работает. Также кажется, что мне придется создать глобальную переменную для каждой из более глубоких переменных, чтобы остановить их? Кажется, я делаю это неправильно :(

clearTimeout(arrow1);
clearTimeout(arrow2);
clearTimeout(arrow3);
clearTimeout(arrow4);

$('#answer_request_walkthrough').text('This shows the person requesting an intro to someone.');
$('#arrow1 .fake_arrow').fadeIn('slow');
$('#answer_request_walkthrough').fadeIn('slow', function() {

    // Point Requestor
    var arrow1 = setTimeout(function () {

        var arrow2 = setTimeout(function () {

            // Point Target
            $('#answer_request_walkthrough').fadeOut('fast', function() {
                $('#answer_request_walkthrough').text('This is the person you know, that they would like to meet.');
                $('#answer_request_walkthrough').fadeIn('fast');
            });

            $('#arrow1 .fake_arrow').fadeOut('slow', function() {
                $('#arrow2 .fake_arrow').fadeIn('slow');
            });

            var arrow3 = setTimeout(function () {

                // Point Message
                $('#answer_request_walkthrough').fadeOut('fast', function() {
                    $('#answer_request_walkthrough').text('This is their message detailing why they want to meet the target.');
                        $('#answer_request_walkthrough').fadeIn('fast');
                    });

                    $('#arrow2 .fake_arrow').fadeOut('slow', function() {
                    $('#arrow3 .fake_arrow').fadeIn('slow');
                });

                    var arrow4 = setTimeout(function () {

                        // Point Button
                        $('#answer_request_walkthrough').fadeOut('fast', function() {
                            $('#answer_request_walkthrough').text('Finally Accept or Deny a message, you remain anonymous if you choose to deny.');
                            $('#answer_request_walkthrough').fadeIn('fast');
                        });

                        $('#arrow3 .fake_arrow').fadeOut('slow', function() {
                            $('#arrow4 .fake_arrow').fadeIn('slow');
                        });

                    }, 4000);

                }, 5000);

            }, 5000);

        }, 5000);
    });

Обновление (я вижу что-то странное). Я позволяю анимации начать воспроизведение и вижу стрелку1 = 6, стрелку2 = 10 и т. д. Затем я начинаю свой тест, перемещаясь (вызовы Ajax), и я вижу, что это начинает происходить, и ошибка продолжает происходить:

arrow2 = 7 whoat-dash.js:660
arrow3 = 10 whoat-dash.js:655
arrow4 = 13 whoat-dash.js:650
page timers = 6 whoat-dash.js:602
page timers = 7 whoat-dash.js:602
page timers = 10 whoat-dash.js:602
page timers = 13 whoat-dash.js:602
arrow1 = 21 whoat-dash.js:665
page timers = 21 whoat-dash.js:602
arrow1 = 22 whoat-dash.js:665
page timers = 22 whoat-dash.js:602
arrow1 = 23 whoat-dash.js:665
arrow2 = 24 whoat-dash.js:660
arrow3 = 27 whoat-dash.js:655
arrow4 = 30 whoat-dash.js:650
page timers = 23 whoat-dash.js:602
page timers = 24 whoat-dash.js:602
page timers = 27 whoat-dash.js:602
page timers = 30 whoat-dash.js:602
arrow1 = 36 whoat-dash.js:665
arrow2 = 37 whoat-dash.js:660
arrow3 = 40

Я добавил console.log в код Трэвиса, чтобы видеть, что происходит, когда я загружаю новую страницу и, таким образом, снова запускаю эту функцию анимации:

//check for existence of previous timeouts
            if ( typeof($.pageTimers) != "undefined" ) {
            //iterate and clear timers if present
                for( var i = 0; i < $.pageTimers.length; i++ ) {
                    clearTimeout($.pageTimers[i]);
                    console.log('page timers = '+$.pageTimers[i]);
                }
            }

javascript variables jquery settimeout cleartimeout
person Leon Gaban    schedule 15.01.2014    source источник
comment
Откуда вы пытаетесь их очистить?   -  person Travis J    schedule 16.01.2014
comment
просто очистите их все в вашей функции fadeIn   -  person dandavis    schedule 16.01.2014
comment
Когда я перехожу на новую страницу, это в основном начинается сначала, но если я ухожу, пока она находится в середине анимации, в основном продолжаются две анимации.   -  person Leon Gaban    schedule 16.01.2014
comment
Я не понимаю, как две анимации продолжают работать, если вы меняете навигацию по страницам.   -  person Travis J    schedule 16.01.2014
comment
SetTimers продолжают работать. стрелка 2 ведет к стрелке 3, когда я открываю новую страницу. стрелка 1 начинается снова, но стрелка 3 все еще там   -  person Leon Gaban    schedule 16.01.2014

Ответы (1)


arrow_upward
2
arrow_downward

Все возвращаемые значения setTimeout являются целыми числами. Если страница загружается в результате ajax, вам придется хранить информацию о тайм-аутах где-то с глобальным доступом. Поскольку вы используете jQuery, вы можете подключиться к нему, если не хотите засорять глобальное пространство имен.

$('#answer_request_walkthrough').fadeIn('slow', function() {

 //check for existence of previous timeouts
 if( typeof($.pageTimers) != "undefined" ){
  //iterate and clear timers if present
  for( var i = 0; i < $.pageTimers.length; i++ ){
   clearTimeout($.pageTimers[i]);
  }
 }
 //reset timeout holder
 $.pageTimers = [];

 //regular code sections


 var arrow1 = setTimeout(function () {
  var arrow2 = setTimeout(function () {

  });
  //push timer int into timeout holder
  $.pageTimers.push(arrow2);
 });
 //push timer int into timeout holder
 $.pageTimers.push(arrow1);
person Travis J    schedule 15.01.2014
comment
Спасибо за пример, я только что попробовал, но не сработало :( Я думаю, мне нужно перестроить свою анимацию, это просто кажется неправильным. Как будто мне не нужно было продолжать такие отступы - person Leon Gaban; 16.01.2014
comment
Спасибо, Трэвис, за публикацию этого обновления, сначала казалось, что моя ошибка исправлена, но она все еще работает :( Я думаю, мне нужно перестроить то, как я делаю анимацию. - person Leon Gaban; 16.01.2014
comment
О, подождите, это работает! Мне пришлось переместить функцию сброса за пределы этого первого fadeIn('slow')! $('#answer_request_walkthrough').fadeIn('slow', function() { Спасибо :D - person Leon Gaban; 16.01.2014