如何在 jQuery 中延迟使用 keyup？

在本文中，我们将看到如何在 jQuery 中使用带有延迟的keyup 。有两种方法可以达到相同的目的：

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

此后，使用setTimeout()方法创建一个新的超时，以在keypress ()函数之后添加延迟，该函数产生所需的效果，即带有延迟的按键。 setTimeout()方法有一个匿名函数作为其参数，该函数使用fadeIn()方法将分割元素的不透明度从隐藏更改为可见，并且经过一段时间的延迟后再次更改分割元素的不透明度，这次使用从可见到隐藏淡出（）方法。 fadeIn() 和 fadeOut() 的淡入淡出效果的速度都被指定为“快” 。

示例：在此示例中， setTimeout()方法包含 800 毫秒或 0.8 秒的延迟，并且在fadeIn()和fadeOut()方法之间指定的延迟为 1000 毫秒或 1 秒。

HTML



  

    
  
    
    

  

    GeeksforGeeks
    jQuery - Use keyup with delay
  
    
    
    
    Keyup with delay of 1 second!

HTML



  

    
  
    
    

  

    GeeksforGeeks
    jQuery - Use keyup with delay
  
    
  
    
    Keyup with delay of 1 second!

输出：

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

例子：

HTML



  

    
  
    
    

  

    GeeksforGeeks
    jQuery - Use keyup with delay
  
    
  
    
    Keyup with delay of 1 second!

输出：