Javascript setTimeout/clearTimeout问题

我试着在10秒的不活动（用户不点击任何地方）后创建一个页面转到起始页面。其余部分我使用jQuery，但测试函数中的set/clear是纯javascript

在我的工作站上，我最终得到了类似这样的功能，我希望我可以在页面上的任何点击中调用它。计时器启动正常，但不会在单击时重置。如果在前10秒内调用该函数5次，则将出现5个警报。。。没有清除超时

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

有没有人有几行代码可以做到这一点？ -在任何时候单击停止、重置和启动计时器。

---

-当计时器点击时，例如10秒，做点什么。

您需要在函数外部声明

计时器。否则，每次函数调用都会得到一个全新的变量

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

这是因为计时器是函数的局部变量

尝试在函数外部创建它。
问题是
计时器
变量是本地变量，每次函数调用后其值都会丢失

您需要将其持久化，您可以将其放在函数外部，或者如果您不想将变量公开为全局变量，您可以将其存储在

不确定这是否违反了一些良好实践编码规则，但我通常会得出以下结论：

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

这样就不需要将计时器声明为退出函数

编辑：这也不会在每次调用时声明新变量，但总是循环使用相同的变量

希望这有帮助。
在react中使用此选项的方法：

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函数绑定到输入
 这很有效。这是我任命的一名经理，负责处理停工待检点事件。有等待的事件，以及当你放手时的事件

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

元素参数是您持有的参数。func参数保持由参数hold指定的毫秒数时激发。clearfunc参数是可选的，如果给定了它，那么如果用户释放或离开元素，它将被触发。你也可以做一些变通来获得你想要的功能。享受！：）
 使用Jquery作为下拉菜单的实用示例！
将鼠标悬停在#IconLoggedinUxExternal上，显示div#ExternalMenuLogin并设置隐藏div#ExternalMenuLogin的时间

将鼠标放在div#ExternalMenuLogin上会取消超时。
在div#ExternalMenuLogin上使用鼠标时，它设置超时

这里的要点总是在设置超时之前调用clearTimeout，这样可以避免双重调用

var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
    $("#ExternalMenuLogin").show()
});

$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )    
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,1000
    );
    $("#ExternalMenuLogin").show()
});

$('#ExternalMenuLogin').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,500
    );
});

这就是我找了几个小时的东西，谢谢。我只是想知道是否有更好的方法来实现这种结果？@nikasv throttling和debouncing是两种选择：加上1个，因为在这种情况下，在调用超时之前清除阻塞超时的变量是必要的，这样可以避免它被调用两次
var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
    $("#ExternalMenuLogin").show()
});

$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )    
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,1000
    );
    $("#ExternalMenuLogin").show()
});

$('#ExternalMenuLogin').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,500
    );
});