setTimeout, clearTimeout forming a reset timeout not working. console.log time issue?

Question

I currently have a Modal popping up and want it to disappear if the user doesn't input their password for 30 seconds. This works, but when I tried to implement it with an onChange event on the input then it stopped working. The weird part is, when I use console.log to test it, it works. Once I remove those console.log's, it doesn't work. Just curious if anyone has seen this before?

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

Above is the logic, below is the input tag.

<input type="password" placeholder="pin/password" id="password" oncreate={element => element.focus()} onchange={() => resetModalTimeout(randomFunction)} />

The main part of this issue is, if I uncomment the console.logs, it works perfectly. The way the code is shown now, it does not work. It will only go through the First cycle (so only work for 30 seconds even though I make a change to the input). and when I log, it clearly shows that change goes through. Any ideas? Of course, I don't want the console.log in the main code, also I am using hyperapp (existing code base). When Logging, I can see the TIMEOUT value changing as expected.

@epascarello Sorry i should've mentioned that as well! I have it outside of the scope, when logging i can see the value changing (to null and to an integer, etc) — thatdevop, Mar 15 '19 at 16:21

score 0 · Answer 1 · answered Mar 15 '19 at 16:44

I just realized what the issue was. With more debugging, my coworker and I realized it was related with the lifecycle hook. It should be oninput rather than onchange. On my computer, onchange was working just fine when logging (not too sure why if someone has an answer to that), but not on my coworker's computer. When changed to oninput it worked just fine for us both. onchange was waiting for the focus to leave the input.

setTimeout, clearTimeout forming a reset timeout not working. console.log time issue?

1 Answers1