如何改進此代碼jquery搜索代碼？

Question

我在這裏有此代碼。它工作得很好，但如果我輸入得太快，就會鎖定。我喜歡看我如何改善它。它將搜索MySql表並根據許多列的條件返回結果。

<script src="jquery-v2.0.3.js"></script> 

<script type='text/javascript'> 
var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

$(document).ready(function(){ 
    $("#search_results").slideUp(); 
    $("#search_button").click(function(e){ 
     e.preventDefault(); 
     ajax_search(); 
    }); 

    $("#search_term").keyup(function(e){ 
     delay(function(){ 
     //alert('Time elapsed!'); 
     }, 1000); 
     e.preventDefault(); 
     ajax_search(); 
    }); 

}); 

function ajax_search(){ 
    $("#search_results").show(); 
    var search_val=$("#search_term").val(); 
    $.post("findcourses.php", {search_term : search_val}, function(data) { 
     if (data.length>0){ 
      $("#search_results").html(data); 
     } 
    }) 
} 

Answer 1

夫婦的事情我見 -

首先，e.preventDefault()不keyUp事件做任何事情。無論你期望這樣做是行不通的，它仍然在keydown事件中起作用。

然後就在這裏：

$("#search_term").keyup(function(e){ 
    delay(function(){ 
    //alert('Time elapsed!'); 
    }, 1000); 
    e.preventDefault(); 
    ajax_search(); 
}); 

您呼叫的延時功能，然後立即調用ajax_search()。搜索是在延遲功能之後，但不會等待。 ajax_search()需要在你的回調

$("#search_term").keyup(function(e){ 
    delay(function(){ 
     ajax_search(); 
    }, 1000); 
}); 

Answer 2

你是在正確的軌道與你的延遲，但它應該有不同的實現。現在，它在keyup觸發器後等待一秒，然後運行ajax調用 - 它最終仍然會調用每個按鍵的jax。這可能是主要的阻力。 （由傑夫在另一個答案中指出;它實際上並不等待秒，因爲ajax函數調用在延遲函數之外）

相反，不要打擾延遲（除非它有一個不同的功能），而是做一個簡單的if_in_ajax布爾檢查。例如 -

var if_in_ajax = false, 
    do_ajax_anyways = false; 
function ajax_search(){ 
    $("#search_results").show(); 
    var search_val=$("#search_term").val(); 

    if (!if_in_ajax || do_ajax_anyways) { 
    $.post("findcourses.php", {search_term : search_val}, function(data) { 
     // Now ajax call is running 
     if_in_ajax = true; 

     if (data.length>0){ 
     $("#search_results").html(data); 
     } 
    }) 
    .always(function() { 
     // After the post call is finished, we're done in ajax 
     if_in_ajax = do_ajax_anyways = false; 
    }); 
    } 

} 

---

如果能夠合理保證Ajax調用只需要一秒鐘，隨時離開的延遲。通過上面的附加檢查，您應該避免大多數滯後問題。

$("#search_term").keyup(function(e){ 
    delay(function(){ 
     ajax_search(); 
    }, 1000); 
}); 

可能更好的是，也可以在模糊上調用ajax搜索（即當他們離開輸入時）。也許在輸入框旁邊添加一個搜索圖標，他們需要單擊此框以便搜索。

$("#search_term").blur(function(e){ 
    do_ajax_anyways = true; 
    ajax_search(); 
});