jQuery auto 建议列表冻结 chrome，或者很慢

Question

我尝试使用你的脚本：https://www.youtube.com/watch?v=YqMtE8UO-xw 我的自动建议列表正在冻结 chrome，它现在可以工作了，然后不确定为什么 chrome 现在会冻结。 我有以下查询：

<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchquery").keyup(function(){
$.get("suggest.php", {searchquery: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data);}); }); });</script>
<script type="text/javascript">     
$(document).ready(function(){
$("#searchquery2").keyup(function(){
$.get("suggest1.php", {searchquery2: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data); }); });});</script>

& 我有以下输入：

<th width="170" scope="col"><input type="text" size="25" name="searchquery2" id="searchquery2" placeholder="Business Type" list="datalist1"/><datalist id="datalist1" /> </datalist> </th> <th width="170" scope="col"><input type="text" list="myCompanies" size="25" name="searchquery" id="searchquery" placeholder="Suburb, City, or Postcode"/><datalist id="myCompanies" /> </datalist></th>


Answer 1

发送许多 ajax 请求会导致浏览器冻结我建议您为请求设置一个超时，然后将最后一个值发送到服务器。如果用户没有输入任何内容，则超时等待然后发送请求。我还建议使用input 事件而不是keyup。 您的代码应如下所示：

$(document).ready(function() {
    $("#searchquery").on('input', function() {
        clearTimeout(window.t1);
        window.t1 = setTimeout(function() {
            $.get("suggest.php", {
                searchquery: $(this).val()
            }, function(data) {
                $("datalist").empty();
                $("datalist").html(data);
            });
        }, 1000);
    });


    $("#searchquery2").on('input', function() {
        clearTimeout(window.t2);
        window.t2 = setTimeout(function() {
            $.get("suggest1.php", {
                searchquery2: $(this).val()
            }, function(data) {
                $("datalist").empty();
                $("datalist").html(data);
            });
        }, 1000);
    });
});