How to clear these setTimeouts when function gets called again

Question

so I have a function which starts up the same animation in a div when you load up any page/section.

I noticed that while the Arrows are navigating to the next position and I change pages(via Ajax requests) that the Arrows keep animating from it's last position.

I found this question/answer, but so far the solution isn't working. Also it seems that I would have to create a global variable for each of the deeper variables to stop them? Seems like I'm doing it wrong :(

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);
    });

Update (I'm seeing something strange) I let the animation start playing and I see arrow1 = 6, arrow2 = 10 etc.. then I start my test by navigating away (Ajax calls) and I see this start to happen and the bug continues to happen:

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 

I added a console.log to Travis's code so I could see what happens when I load a new page and thus run's this animation function again:

//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]);
                }
            }

Answer 1

All setTimeout returns is an integer. If the page is being loaded as a result of ajax, then you are going to be forced to store the information for the timeouts somewhere with global access. Since you are using jQuery, you can attach to that if you do not want to muddy the global namespace.

$('#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);