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函数绑定到输入。