123

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

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

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

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

4

7 回答 7

254

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

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}
于 2010-06-10T14:30:29.403 回答
48

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

你需要持久化它，你可以把它放在函数之外，或者如果你不想将变量公开为全局变量，你可以将它存储在一个闭包中，例如：

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();
于 2010-06-10T14:31:28.993 回答
15

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

尝试在函数之外创建它。

于 2010-06-10T14:30:49.573 回答
8

一种在反应中使用它的方法：

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

于 2017-07-31T21:45:26.043 回答
2

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

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

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

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

希望这可以帮助。

于 2012-07-24T15:16:37.197 回答
0

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

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();
        }
    }
}

element 参数是您持有的参数。func 参数在其保持由参数 hold 指定的毫秒数时触发。clearfunc 参数是可选的，如果给定，如果用户放开或离开元素，它将被触发。您还可以做一些变通方法来获得您想要的功能。享受！:)

于 2018-07-28T11:32:07.777 回答
0

使用 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
    );
});
于 2020-05-01T15:45:25.723 回答