search

Home >Web Front-end >JS Tutorial >jQuery monitors the keyboard for a period of time without input_jquery

jQuery monitors the keyboard for a period of time without input_jquery

WBOY
WBOYOriginal
2016-05-16 15:04:191658browse

Monitoring no input for a period of time can be used to complete simple input

Last time, we implemented a problem of sending a request to the background to obtain data when the simulated input is completed and displaying it to the front desk. The core judgment criterion is the definition of input completion.

That is: how does the user count the input as completed.

The standard I use is that when the content in a text box does not change for 1 second, it means that the user has not input within 1 second, indicating that the user has completed the input and is waiting for the return data. So how does jQuery determine if there is no input within 1 second. 

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
var lastTime;
$(function(){
$('#text1').keyup(function (e) {
lastTime = e.timeStamp;
setTimeout(function () {
if (lastTime - e.timeStamp == 0) {
alert("1秒内没再输入，可以发送查询");
}
}, 1000);
});
})
</script>
</head>
<body>
<input id="text1" type="text" value="" />
</body>
</html>

Principle

This is such a concise piece of code. Its principle can be briefly described as follows:

Every time the user presses the keyboard, the current time is recorded, and then the time is judged after 1 second.

Since lastTime is a global variable, lastTime is always changing when the user is typing, so if you use lastTime-e.timeStamp after one second, only the last e.timeStamp pressed will be 0. .

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript Study Guide: Callback Issues_Basic KnowledgeNext article：JavaScript Study Guide: Callback Issues_Basic Knowledge

Related articles

See more