极客教程如何在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>
输出:
方法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>
输出:
