Javascript 中的 setTimeout答案

【问题标题】：setTimeout in JavascriptJavascript 中的 setTimeout
【发布时间】：2011-07-26 20:55:27
【问题描述】：

我正在用这段代码在 javascript 中为一些进程制作动画：

  var direction = $('#rightControl');
  function animate()
  {
      if (hover) return;

      if (!direction.is(':visible'))
      {
          if (direction.attr('id') == 'rightControl') direction = $('#leftControl');
          else direction = $('#rightControl');
      }

      doMove(direction);
  }

  // Animate slider!
  setInterval(animate, 2500);

直到元素#rightControl 存在于页面：每2.5 秒调用animate() 函数并移动我的div（在doMove 内）。当#rightControl 消失时，我将方向更改为#leftControl，...

一切都很酷，但是当页面在后台运行几次（例如，4-5 分钟）时，动画会变得疯狂并每 100-200 毫秒调用一次。怎么了？

【问题讨论】：

调用setInterval 的代码在哪里？它是否在另一个函数的主体中，是否有可能多次调用该函数？
@kirk-woll 它被称为：$(document).ready(function() { .... } );。只有一次。
这个jsfiddle.net/simevidas/gHZSW 表明只要 setInterval 高于钳位阈值，它就是可靠的。

标签： javascript timer settimeout

【解决方案1】：

嗯，setInterval 只是每 * 秒向调用堆栈添加一些内容。如果有一些 javascript 被执行了几秒钟，事情可能会在调用堆栈上建立。如果页面也在后台，我猜也可能发生这种情况。检查它是否适用于 setTimeouts（所以 1 或函数调用来启动它，1 在函数的末尾）。

【讨论】：

【解决方案2】：

我能猜到是setInterval() 被意外调用到了别处，或者animate() 被调用了。

试试这个小提琴：http://jsfiddle.net/fXJbW/ 它只适用于animate() 和setInterval()。问题出在您的其余代码中。

你可以做的另一件事是：

var timeout;

function animate()
{
    // do stuff here
    clearTimeout(timeout);
    timeout=setTimeout(animate,2500);
}

【讨论】：