How to use keyup with delay in jQuery ?

Last Updated : 01 Jun, 2023

In this article, we will see how to use keyup with a delay in jQuery. There are two ways to achieve the same:

Approach 1: Using the keypress(), fadeIn(), delay() and fadeOut() methods in the jQuery library and clearTimeout() and setTimeout() methods in native JavaScript. Firstly, a variable keyupTimer with the keyword "let" is declared such that a timeout can be set with this variable and can be uniquely identified later in the program. Next, there is an input element with an id of "geeks" which accepts any text data. Also, there is a division element that indicates when the keyup with delay effect occurs. We attach a keypress() method to this particular input element with the parameter of the method being an anonymous function. Inside the function, the clearTimeout() method is called with the parameter being the variable keyupTimer defined in the first step of the script. This is done to ensure that the variable doesn't contain any pre-existing timeout before assigning a new timeout to it.

Thereafter, a new timeout is created with the setTimeout() method to add the delay after the keypress() function which generates the desired effect i.e. keyup with a delay. The setTimeout() method has an anonymous function as its parameter which changes the opacity of the division element from hidden to visible using the fadeIn() method and after some delay again changes the opacity of the division element, this time from visible to hidden using the fadeOut() method. The speed of the fading effects of fadeIn() and fadeOut() are both specified as "fast".

Example: In this example, the setTimeout() method contains a delay of 800 milliseconds or 0.8 seconds and the delay specified between the fadeIn() and the fadeOut() method is 1000 milliseconds or 1 second.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 40px;
        }

        div,
        p {
            font-size: 25px;
            font-weight: bold;
        }

        input {
            margin: 0 auto;
        }

        input:focus {
            outline: none !important;
            border: 3px solid green;
            box-shadow: 0 0 10px green;
        }

        /* Initially, the message to display after 
          keyup with delay is not visible */
        div {
            margin-top: 1.5rem;
            display: none;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>jQuery - Use keyup with delay</p>

    <input type="text" id="geeks" />
  
    <!-- Message to display after keyup with delay -->
    <div>Keyup with delay of 1 second!</div>
  
    <script type="text/javascript">
        let keyupTimer;
        $("#geeks").keypress(function () {
            clearTimeout(keyupTimer);
            keyupTimer = setTimeout(function () {
                $("div")
                  .fadeIn("fast")
                  .delay(1000)
                  .fadeOut("fast");
            }, 800);
        });
    </script>
</body>
</html>

Output:

Approach 2: Using the keyup(), fadeIn(), delay() and fadeOut() methods in the jQuery library & clearTimeout() and setTimeout() methods in native JavaScript. This approach is very similar to the previous approach but the key distinction is that a keyup() method is attached to the input element instead of a keypress() method.