1

所以我有一个功能,当您加载任何页面/部分时,它会在 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);
    });

更新(我看到一些奇怪的东西)我让动画开始播放,我看到 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]);
                }
            }
4

1 回答 1

2

所有 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);
于 2014-01-15T23:47:55.553 回答