SetTimeout/clear Timeout 问题

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

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

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

尝试在函数之外创建它。

问题是 timer变量是本地的，在每次函数调用之后它的值就丢失了。

你需要持久化它，你可以把它放在函数之外，或者如果你不想把变量公开为全局的，你可以把它存储在 了结中，例如:

var endAndStartTimer = (function () {
var timer; // variable persisted here
return function () {
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);

这就避免了将计时器声明出函数的需要。

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

希望这个能帮上忙。

一种反应方式:

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

效果不错。是我指派来处理暂停事件的经理。有一些事情等着你去做，当你放手的时候。

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 作为下拉菜单的实例！ 在鼠标移动到 # IconLoggedinUxForeign 上显示 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
);
});