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调用 - 它最终仍会调用ajax每次击键。这可能是主要阻力。 （Jeff在另一个答案中指出;它实际上并没有等到第二个，因为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(); 
});

如何改进此代码jquery搜索代码？

2 个答案: