Question

所以我有一个函数，当你加载任何页面/部分时，它会在div中启动相同的动画。

我注意到，当箭头导航到下一个位置时，我更改页面（通过Ajax请求），箭头保持动画从它的最后位置开始。

I found this question/answer，但到目前为止解决方案无效。此外，似乎我必须为每个更深层次的变量创建一个全局变量来阻止它们？好像我做错了：（

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

更新（我看到一些奇怪的事）我让动画开始播放，我看到arrow1 = 6，arrow2 = 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

我在Travis的代码中添加了一个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]);
                }
            }

Answer 1

所有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);

如何在再次调用函数时清除这些setTimeouts

1 个答案: