我目前有一个Modal弹出,并希望它消失,如果用户没有输入他们的密码30秒。这是有效的,但是当我尝试在输入上使用onChange
事件实现它时,它就停止了工作。奇怪的是,当我使用console.log
测试它时,它的工作原理。一旦我删除那些console.log
,它不起作用。只是好奇,如果有人之前见过这个?
let TIMEOUT = null;
const setModalTimeout = randomFunction => {
if (TIMEOUT === null) {
// console.log('NOTE: set timeout before', TIMEOUT, new Date().toLocaleTimeString());
TIMEOUT = setTimeout(() => randomFunction(false), MODAL_TIMEOUT);
}
// console.log('NOTE: set timeout after', TIMEOUT, new Date().toLocaleTimeString());
};
const clearModalTimeout = (done) => {
if (TIMEOUT !== null) {
// console.log('NOTE: clear timeout before', TIMEOUT, new Date().toLocaleTimeString());
clearTimeout(TIMEOUT);
TIMEOUT = null;
}
// console.log('NOTE: clear timeout after', TIMEOUT, new Date().toLocaleTimeString());
done && done();
};
const resetModalTimeout = (randomFunction) => {
// console.log('NOTE: reset timeout', TIMEOUT, new Date().toLocaleTimeString());
clearModalTimeout();
setModalTimeout(randomFunction);
}
以上是逻辑,下面是输入标签。
<input type="password" placeholder="pin/password" id="password" oncreate={element => element.focus()} onchange={() => resetModalTimeout(randomFunction)} />
这个问题的主要部分是,如果我取消注释console.log
s,它的工作完美。现在显示代码的方式,它不起作用。它只会经历第一个循环(因此即使我对输入进行了更改,也只能工作30秒)。当我记录时,它清楚地表明变化经历了。有任何想法吗?当然,我不想在主要代码中使用console.log
,我也使用hyperapp(现有代码库)。记录时,我可以看到TIMEOUT
值按预期变化。
我刚才意识到问题所在。通过更多调试,我的同事和我意识到它与生命周期钩子有关。它应该是oninput
而不是onchange
。在我的电脑上,onchange
在登录时工作得很好(不太确定为什么有人有答案),但不是在我的同事的电脑上。当改为oninput
时,它对我们两个都很好。 onchange
正在等待焦点离开输入。