En este artículo, veremos cómo usar keyup con retraso en jQuery. Hay dos formas de lograr lo mismo:
Enfoque 1: usar los métodos keypress() , fadeIn() , delay() y fadeOut() en la biblioteca jQuery y los métodos clearTimeout() y setTimeout() en JavaScript nativo. En primer lugar, se declara una variable keyupTimer con la palabra clave » let » de modo que se puede establecer un tiempo de espera con esta variable y se puede identificar de forma única más adelante en el programa. A continuación, hay un elemento de entrada con una identificación de «geeks» que acepta cualquier dato de texto. Además, hay un elemento de división que indica cuándo se produce el keyup con efecto de retardo. Adjuntamos una pulsación de tecla()método a este elemento de entrada en particular con el parámetro del método siendo una función anónima. Dentro de la función, se llama al método clearTimeout() con el parámetro siendo la variable keyupTimer definida en el primer paso del script. Esto se hace para garantizar que la variable no contenga ningún tiempo de espera preexistente antes de asignarle un nuevo tiempo de espera.
A partir de entonces, se crea un nuevo tiempo de espera con el método setTimeout() para agregar el retraso después de la función keypress() que genera el efecto deseado, es decir, keyup con un retraso. El método setTimeout() tiene una función anónima como parámetro que cambia la opacidad del elemento de división de oculto a visible usando el método fadeIn() y, después de un tiempo, vuelve a cambiar la opacidad del elemento de división, esta vez de visible a oculto usando el método fadeOut() . La velocidad de los efectos de desvanecimiento de fadeIn() y fadeOut() se especifican como «rápida» .
Ejemplo: En este ejemplo, el método setTimeout() contiene un retraso de 800 milisegundos o 0,8 segundos y el retraso especificado entre el método fadeIn() y fadeOut() es de 1000 milisegundos o 1 segundo.
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>
Producción:
Enfoque 2: usar los métodos keyup() , fadeIn() , delay() y fadeOut() en la biblioteca jQuery y los métodos clearTimeout() y setTimeout() en JavaScript nativo. Este enfoque es muy similar al enfoque anterior, pero la distinción clave es que se adjunta un método keyup() al elemento de entrada en lugar de un método keypress() .
Ejemplo:
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").keyup(function () {
clearTimeout(keyupTimer);
keyupTimer = setTimeout(function () {
$("div")
.fadeIn("fast")
.delay(1000)
.fadeOut("fast");
}, 800);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA