0

我目前有一个 Modal 弹出，如果用户在 30 秒内没有输入密码，我希望它消失。这行得通，但是当我尝试使用输入onChange上的事件来实现它时，它就停止了工作。奇怪的是，当我用来测试它时，它可以工作。一旦我删除了那些，它就不起作用了。只是好奇是否有人以前见过这个？console.logconsole.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.logs，它会完美运行。现在显示代码的方式，它不起作用。它只会经历第一个周期（因此即使我对输入进行了更改，也只能工作 30 秒）。当我登录时，它清楚地表明发生了变化。有任何想法吗？当然，我不希望console.log在主代码中，我也在使用hyperapp（现有代码库）。记录时，我可以看到TIMEOUT值按预期变化。

4

1 回答 1

0

我才意识到问题出在哪里。通过更多的调试，我和我的同事意识到它与生命周期挂钩有关。应该是oninput而不是onchange。在我的电脑上，onchange登录时工作得很好（不太清楚为什么有人对此有答案），但在我同事的电脑上却不行。当更改为oninput它对我们俩来说都很好。onchange正在等待焦点离开输入。

于 2019-03-15T16:44:17.450 回答