清单 5. 使用带有延迟的 HTML 响应的即时页面
<html><head>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery-1.4.2.min.js"></script>
<title>Instant Search - HTML Based With Delay</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
delayTimer = null;
function getResults() {
$.get('search_html.php?q='+escape($('#term').val()), function(data) {
$('#results').html(data);
} );
delayTimer = null;
}
$(document).ready(function() {
$('#term').keyup(function() {
if ( delayTimer )
window.clearTimeout( delayTimer );
delayTimer = window.setTimeout( getResults, 200 );
} );
} );
</script>
</body>
</html>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery-1.4.2.min.js"></script>
<title>Instant Search - HTML Based With Delay</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
delayTimer = null;
function getResults() {
$.get('search_html.php?q='+escape($('#term').val()), function(data) {
$('#results').html(data);
} );
delayTimer = null;
}
$(document).ready(function() {
$('#term').keyup(function() {
if ( delayTimer )
window.clearTimeout( delayTimer );
delayTimer = window.setTimeout( getResults, 200 );
} );
} );
</script>
</body>
</html>
此代码在用户按键时创建一个计时器。当该计时器在 200 毫秒后停止时，请求发出。如果另外一次击键在计时器停止之前，则原来的计时器将被取消，同时创建一个新的计时器。其结果就是在用户停止了键入之后，计时器停止 200 毫秒。虽然该界面始终感觉像原来的，但是向服务器发出请求的数量会大幅减少，尤其是在用户快速键入的时候。
虽然我们可以到此为止，但是实际上有另外两种方式来进行此即时过程。
