Javascript 如何在再次调用函数时清除这些设置超时

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

我注意到，当箭头导航到下一个位置并且我（通过Ajax请求）更改页面时，箭头会从它的上一个位置保持动画

，但到目前为止，解决方案还不起作用。另外，似乎我必须为每个更深层次的变量创建一个全局变量来阻止它们？看来我做错了：(

更新（我看到一些奇怪的东西） 我让动画开始播放，我看到箭头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 

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

//检查是否存在以前的超时
如果（类型（$.pageTimers）！=“未定义”）{
//迭代并清除计时器（如果存在）
对于（变量i=0；i<$.pageTimers.length；i++）{
clearTimeout（$.pageTimers[i]）；
log（'page timers='+$.pageTimers[i]）；
}
}

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

$（'response\u request\u walkthrough'）.fadeIn（'slow'，function（）{
//检查是否存在以前的超时
如果（类型（$.pageTimers）！=“未定义”）{
//迭代并清除计时器（如果存在）
对于（变量i=0；i<$.pageTimers.length；i++）{
clearTimeout（$.pageTimers[i]）；
}
}
//重置超时保持器
$.pageTimers=[]；
//常规代码段
var arrow1=setTimeout（函数（）{
var arrow2=设置超时（函数（）{
});
//将计时器int推入超时保持器
$.pageTimers.push（箭头2）；
});
//将计时器int推入超时保持器
$.pageTimers.push（箭头1）；

你想从哪里清除它们？只需在fadeIn功能中全部清除它们当我导航到新页面时，基本上会重新开始，但如果我在动画中期导航，基本上有两个动画现在继续。我不明白这两个动画是如何“继续”的如果更改页面导航，则设置计时器将继续运行。当我在新页面中使用ajax时，箭头2将导致箭头3。箭头1重新开始，但箭头3仍然存在。感谢示例，我只是尝试了一下，但没有成功：（我想我需要重建我的动画，这似乎是错误的。好像我不应该一直这样缩进感谢Travis发布此更新，起初看起来我的bug已经修复，但它仍然在这样做：（我想我需要重建我制作动画的方式。哦，等等，它确实起作用了！我必须将重置功能移到第一个fadeIn（'slow'）！

$（'response#request_walkthrough'）。fadeIn（'slow'，function（）{

谢谢：D

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