AJAX: Trì hoãn tìm kiếm khi nhập vào trường mẫu

Question

Trên trang web của tôi, tôi sử dụng JavaScript/AJAX để thực hiện tìm kiếm và hiển thị kết quả trong khi người dùng vẫn đang nhập.

HTML (cơ thể):

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p> 
</form> 

JavaScript (tiêu đề):

function doSearch(text) { 
    // do the ajax stuff here 
    // call getResults.php?search=[text] 
} 

Nhưng điều này có thể gây ra rất nhiều yêu cầu đến máy chủ.

Vì vậy, tôi muốn giải tỏa các máy chủ bằng cách thiết lập một sự chậm trễ:

Bất cứ khi nào sự kiện onkeyup là bắn, hàm doSearch() sẽ hiển thị một "ajax tải đồ họa" và đợi 2 giây. Chỉ khi sự kiện này KHÔNG được kích hoạt lại trong 2 giây này, kết quả sẽ được tìm nạp từ tệp PHP.

Có cách nào để thực hiện việc này không? Bạn có thể vui lòng giúp tôi không? Cảm ơn trước!

Answer 1

var delayTimer; 
function doSearch(text) { 
    clearTimeout(delayTimer); 
    delayTimer = setTimeout(function() { 
     // Do the ajax stuff 
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s 
} 

Answer 2

Đơn giản chỉ cần thiết lập gọi trì hoãn với setTimeout(), sau đó loại bỏ nó một lần nữa trên tất cả các sự kiện với clearTimeout()

HTML

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p> 
</form> 

Javascript

var timeout = null; 

function doDelayedSearch(val) { 
    if (timeout) { 
    clearTimeout(timeout); 
    } 
    timeout = setTimeout(function() { 
    doSearch(val); //this is your existing function 
    }, 2000); 
} 

Answer 3

Đối với loại điều tôi có xu hướng sử dụng một chút 'throttling' chức năng xảo quyệt tạo ra bởi Remy Sharp:

http://remysharp.com/2010/07/21/throttling-function-calls/