Ajax 实时搜索在按下第一个键后添加计时器

Question

我有一个 ajax 实时搜索脚本，它在数据库中搜索名称。我的问题是我使用keyup();，所以每次在输入字段内按下一个键时，php 脚本都会再次被触发。这会导致输出被多次刷新（取决于搜索词的字符数）。

所以我添加了一个 300 毫秒的计时器，但是在开始输入时这太慢了。我的解决方案是在按下第一个键时立即触发 php 脚本，并在第一个键后添加计时器。这样用户就可以立即看到正在发生的事情。

如何使用我当前的代码实现这一点？还是有比我想象的更好的解决方案？

我的代码：

<input type="search" name="keyword" class="producten-icon divider" placeholder="Zoeken..." id="s_search">

我的 ajax：

<script>
    var typingTimer;
    var doneTypingInterval = 300;

    $("#s_search").on('keyup',function () {
        clearTimeout(typingTimer)
        var key = $(this).val();
        if(key == ""){
          $(".defaultresults").css("display", "inline");
          $(".phpresult").css("display", "none");
        }else{
          typingTimer = setTimeout(doneTyping, doneTypingInterval);
          $(".defaultresults").css("display", "none");

        }

        function doneTyping () {
          $.ajax({
              url:'includes/fetch_results.php',
              type:'GET',
              data:'keyword='+key,
              beforeSend:function () {
                  $("#results").slideUp('fast');
              },
              success:function (data) {
                  $("#results").html(data);
                  $("#results").slideDown('fast');
              }
          });
        }


    });
</script>

最后是我的 php 文件：

<?php
include 'connection.php';
$conn = new Connection;
if($_GET['keyword'] && !empty($_GET['keyword']))
{
  //  Results names
  $results                  = "SELECT `naam` FROM `producten` WHERE `naam` LIKE '".$_GET['keyword']."%'";
  $resultscon               = $conn->query($results);
  $resultscr                = array();
  while ($resultscr[] = $resultscon->fetch_assoc());
  $eend = @array_map('current', $resultscr);
  sort($eend, SORT_STRING | SORT_FLAG_CASE);
  // echo '<pre>';
  // print_r($eend);
  // echo '</pre>';
  echo '<div class="phpresult"><ul class="productenlijst">';
  foreach($eend as $key => $result){
    //De eerste waarde is leeg dus voor de code pas uit als key nummer is niet 0
    if($key != '0'){
      echo '<li>';
      $char = $result[0];
      if($char !== $lastChar){
        if($lastChar !== ''){
          echo '<br>';
        }
        echo '<span style="color:#eb9600;font-size:25px;font-weight:800;">'.strtoupper($char).'</span><br>';
        $lastChar = $char;
      }
      echo $result.'<br></li>';
      $i++;
    }
  }
  echo '</ul></div>';
};
?>

Answer 1

如何设置间隔并重置布尔检查是否可以发送

var sendSearch = true;
var isTiming = false;
var timeout = 300;

$("#s_search").on("keyup", function(){

if (!isTiming){
    isTiming = true;
    setInterval(function(){sendSearch = true;}, timeout);
}

if (sendSearch){

    sendSearch = false;     
    // do your ajax post here   
}

});