如何改进此代码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(); 
});