setTimeout / clearTimeout问题

例如，我尝试做一个页面去首页。 10秒的不活动（用户不要点击任何地方）。 我使用其余的jQuery，但在我的testing函数设置/清除纯JavaScript。

在我的沮丧中，我最终得到了类似这个函数的东西，我希望我可以在页面上点击任何东西。 计时器可以正常启动，但不会在点击时重置。 如果该function在前10秒内被调用5次，那么5个警报将会出现… no clearTimeout …

function endAndStartTimer() { window.clearTimeout(timer); var timer; //var millisecBeforeRedirect = 10000; timer = window.setTimeout(function(){alert('Hello!');},10000); } 

任何人都得到了一些代码行将做的伎俩？ – 任何点击停止，重置并启动计时器。 – 当计时器命中例如。 10秒做一些事情。

Answer 1

你需要在函数之外声明“timer”。 否则，每个函数调用都会得到一个全新的variables。

 var timer; function endAndStartTimer() { window.clearTimeout(timer); //var millisecBeforeRedirect = 10000; timer = window.setTimeout(function(){alert('Hello!');},10000); } 

Answer 2

问题是timervariables是本地的，每次函数调用后，它的值都会丢失。

你需要坚持它，你可以把它放在函数之外，或者如果你不想把variables暴露为全局的，你可以把它存储在一个闭包中 ，例如：

 var endAndStartTimer = (function () { var timer; // variable persisted here return function () { window.clearTimeout(timer); //var millisecBeforeRedirect = 10000; timer = window.setTimeout(function(){alert('Hello!');},10000); }; })(); 

Answer 3

这是因为计时器是你的函数的局部variables。

尝试在函数之外创build它。

Answer 4

不知道这是否违反了一些良好的做法编码规则，但我通常会拿出这个：

 if(typeof __t == 'undefined') __t = 0; clearTimeout(__t); __t = setTimeout(callback, 1000); 

这样可以防止需要将该定时器声明为不在函数中。

希望这可以帮助。

Answer 5

在反应中使用这种方法：

 class Timeout extends Component { constructor(props){ super(props); this.state = { timeout: null } } userTimeout(){ const { timeout } = this.state; clearTimeout(timeout); this.setState({ timeout: setTimeout(() => {this.callAPI()}, 250) }) } } 

如果您只想在用户停止之后调用API，则很有帮助。 打字例如。 userTimeout函数可以通过onKeyUp绑定到input。