setTimeout / clearTimeout问题

Question

我尝试使页面转到例如eg之后的首页。10秒钟不活动（用户未单击任何位置）。我使用jQuery进行其余操作，但测试功能中的设置/清除是纯JavaScript。

令我沮丧的是，我最终得到了类似该功能的东西，希望我可以在该页面上单击任何按钮。计时器可以正常启动，但单击后不会重置。如果在前10秒内调用该函数5次，则将出现5条警报...无clearTimeout ...

function endAndStartTimer() {

    window.clearTimeout(timer);

    var timer;

    //var millisecBeforeRedirect = 10000; 

    timer = window.setTimeout(function(){alert('Hello!');},10000); 

}

有人得到一些可以解决问题的代码行吗？-在任何点击停止时，重置并启动计时器。-当计时器命中时 10sec做点什么。

Answer 1

您需要在函数timer 外部声明。否则，您将在每次函数调用时获得一个全新的变量。var timer;function endAndStartTimer() {  window.clearTimeout(timer);  //var millisecBeforeRedirect = 10000;   timer = window.setTimeout(function(){alert('Hello!');},10000); }

Answer 2

问题在于该timer变量是局部变量，并且在每个函数调用之后其值都会丢失。您需要持久化它，可以将其放在函数外部，或者如果您不想将变量公开为全局变量，则可以将其存储在闭包中，例如：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

在反应中使用此方法：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，则该功能非常有用。可以通过onKeyUp将userTimeout函数绑定到输入。