setTimeout / clearTimeout 问题答案

【问题标题】：setTimeout / clearTimeout problemssetTimeout / clearTimeout 问题
【发布时间】：2011-03-02 05:08:55
【问题描述】：

我尝试在例如之后创建一个页面以转到起始页。 10 秒不活动（用户没有点击任何地方）。其余部分我使用 jQuery，但我的测试函数中的设置/清除是纯 javascript。

在我的挫败中，我最终得到了类似这个函数的东西，我希望我可以在页面上的任何点击中调用它。计时器可以正常启动，但不会在单击时重置。如果函数在前 10 秒内被调用 5 次，则会出现 5 个警报...没有 clearTimeout...

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

任何人有几行代码可以解决问题吗？ - 在任何点击停止，重置并启动计时器。 - 当计时器击中时，例如。 10秒做点什么。

【问题讨论】：

标签： javascript jquery timer settimeout

【解决方案1】：

使用 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
    );
});

【讨论】：

【解决方案2】：

这很好用。这是我为处理保持事件而设计的经理。有事件可以暂停，当你放手时。

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 参数是可选的，如果给定，如果用户放开或离开元素，它将被触发。您还可以做一些变通方法来获得您想要的功能。享受！ :)

【讨论】：

【解决方案3】：

您需要在函数之外声明timer 。否则，您会在每次函数调用时获得一个全新的变量。

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

【讨论】：

加 1，因为在这种情况下，有必要在调用超时之前清除隐藏 timeOut 的变量，因此，避免它被调用两次

【解决方案4】：

不确定这是否违反了一些好的实践编码规则，但我通常会提出这个：

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

这避免了在函数之外声明计时器的需要。

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

希望这会有所帮助。

【讨论】：

【解决方案5】：

在 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，这很有帮助。 userTimeout 函数可以通过 onKeyUp 绑定到输入。

【讨论】：

这是我一直在寻找的几个小时，谢谢。我只是想知道是否有更好的方法来实现这种结果？
@nikasv 节流和去抖动是两种选择：medium.com/@_jh3y/…

【解决方案6】：

问题在于timer变量是局部变量，每次函数调用后其值都会丢失。

你需要持久化它，你可以把它放在函数之外，或者如果你不想将变量暴露为全局，你可以将它存储在closure中，例如：

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

【讨论】：

【解决方案7】：

这是因为 timer 是函数的局部变量。

尝试在函数之外创建它。

【讨论】：