如何在jQuery中使用keyup与延迟

在这篇文章中，我们将看到如何在jQuery中使用keyup与延迟。有两种方法可以实现同样的目的。

方法1：使用jQuery库中的keypress()、fadeIn()、delay()和fadeOut()方法以及本地JavaScript中的clearTimeout()和setTimeout()方法。首先，声明了一个变量keyupTimer，关键字为 “let”，这样就可以用这个变量来设置超时，并且在程序中可以唯一地识别。接下来，有一个ID为 “geek “的输入元素，它接受任何文本数据。此外，还有一个分部元素，指示何时发生带有延迟效果的按键。我们给这个特定的输入元素附加一个keypress()方法，该方法的参数是一个匿名函数。在这个函数中，clearTimeout()方法被调用，参数是脚本第一步中定义的变量keyupTimer。这样做是为了确保在给它分配一个新的超时之前，该变量不包含任何预先存在的超时。

此后，用setTimeout()方法创建了一个新的超时，在keypress()函数之后增加了延迟，产生了预期的效果，即有延迟的keyup。setTimeout()方法有一个匿名函数作为参数，它使用fadeIn()方法将分区元素的不透明度从隐藏变为可见，并在一些延迟后再次改变分区元素的不透明度，这次使用fadeOut()方法从可见变为隐藏。fadeIn()和fadeOut()的褪色效果的速度都被指定为 “fast”。

例子：在这个例子中，setTimeout()方法包含800毫秒或0.8秒的延迟，在fadeIn()和fadeOut()方法之间指定的延迟是1000毫秒或1秒。

<!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>

输出:

如何在jQuery中使用keyup与延迟？

方法2：使用jQuery库中的keyup()、fadeIn()、delay()和fadeOut()方法以及本地JavaScript中的clearTimeout()和setTimeout()方法。这种方法与之前的方法非常相似，但关键的区别在于，一个keyup()方法被附加到输入元素上，而不是一个keypress()方法。

示例:

<!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").keyup(function () {
            clearTimeout(keyupTimer);
            keyupTimer = setTimeout(function () {
                ("div")
                    .fadeIn("fast")
                    .delay(1000)
                    .fadeOut("fast");
            }, 800);
        });
    </script>
</body>
  
</html>