Using setTimeOut on user input to trigger an event

Question

I have the following code:

$("#test").on("keyup", (e) => {
  if(e.target.value.length === 3) {
    setTimeout(() => {
      console.log("fired")
    }, 2000)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

If the user enters 3 characters, console.log("fired") gets automatically fired after 2 seconds (That works with the above code)

But if the user types another character during this time, I need to be able to clear the old time out and wait for 2 seconds again.

Once this times out, it should just run as expected. How can I achieve this?

EDIT:

let timeOut;

$("#test").on("keyup", (e) => {
  if(e.target.value.length === 3) {
    timeOut = setTimeout(() => {
      console.log("fired if length is 3")
    }, 2000)
  } else if (e.target.value.length === 4) {
    clearTimeout(timeOut)
    timeOut = setTimeout(() => {
      console.log("fired if length is 4")
    }, 2000)
  }
})

Do you want to fire the event if chars count is in multiple of 3 like 3,6,9,12 ? — Abhishek
– Abhishek, Commented Jul 23, 2018 at 3:32
Set the timeout as a global variable, i.e. var timeout. Then use clearTimeout(timeout) to remove the existing timer, and timeout = setTimeout(...) to restart it. — Tyler Roper
– Tyler Roper, Commented Jul 23, 2018 at 3:34
@Abhishek I think the OP wants to fire the event if the length is >= 3 — clabe45
– clabe45, Commented Jul 23, 2018 at 3:34
Then he need to change the condition and use clearTimeout as described by you and @TylerRoper — Abhishek
– Abhishek, Commented Jul 23, 2018 at 3:38

JasonB · Accepted Answer · 2018-07-23 03:57:16Z

6

Store a reference to the timeout and you can then reset it using the reference and the function clearTimeout when the creation of the timeout is triggered again.

You can also store a flag to track whether the message has been fired and use this flag to abort further actions.

let timeOut,
    hasFired = false;

$("#test").on("keyup", (e) => {
  if ( hasFired ) {
    return;
  }
  if(e.target.value.length >= 3) {
    clearTimeout( timeOut );
    let message = "length is " + e.target.value.length;
    timeOut = setTimeout(() => {
      console.log( message );
      hasFired = true;
    }, 2000)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

edited Jul 23, 2018 at 3:57

answered Jul 23, 2018 at 3:33

JasonB

6,4182 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

blankface Over a year ago

What happens in clearTimeout( timer ) the first time the condition is met?

Tyler Roper Over a year ago

@ZeroDarkThirty Not my answer, but the answer is nothing, which should work perfectly in your case.

blankface Over a year ago

I've edited the main post with another approach. Please tell me if I'm wrong/right.

Tyler Roper Over a year ago

@ZeroDarkThirty You shouldn't really be editing the question based on answers that you received to your initial question. In any event, unless you want something different to happen for 3 characters vs 4 characters (to warrant the if statement), I see no reason why you'd use that code instead of the code in JasonB's answer.

blankface Over a year ago

Btw, this code keeps firing every time you add a new character. console.log should ONLY fire if user enters a new value in the time we are waiting for the first console.log to fire.

|

Collectives™ on Stack Overflow

Using setTimeOut on user input to trigger an event

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related