Javascript:为什么我的即时搜索功能运行滞后，如何改进？

Question

下面的演示是我构建的即时搜索功能，就像谷歌搜索一样，在用户输入后立即打印出结果。

测试时，在localhost上运行流畅，但在web上运行滞后，即当用户快速输入多个字符时，按键将在输入框中等待几秒钟等待数据处理(我猜测)然后输入的字符在 之后显示了很多秒。这绝对不利于用户体验。我该如何解决？

前端

<input onkeyup="searchq();" type="text">
<script>
function searchq(){
        // get the value
            txt = $("input").val();
            // post the value
            if(txt){
                $.post("search.php", {searchVal: txt}, function(result){
                    $("#search_output").html(result+"<br><a class='anchor_tag_s' href='createobject.php?object="+txt+"'><div id='notfound'>Not found above? Create Here.</div><a>");
                });
            }
            else{
                $("#search_output").html("");
            }
        };
</script>

后端

    //query the search using match
    $query=mysqli_query($conn,"SELECT * from objects WHERE Match(name) Against ('%$search%' in natural language mode) LIMIT 9") or die("could not search! Oops, Panpan might be hacked");
    $count=mysqli_num_rows($query);
   //if match no result using like query
    if($count==0){
        $query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%' LIMIT 9") or die("could not search! Oops, Panpan database might be hacked");
        $count=mysqli_num_rows($query);
        if ($count==0){
            while($count==0){

            //if matach and like show no result, remove the frist word of array, then search, if no result, do it again, if not, do it again.
                $search = explode(" ",$search);
                $search=array_slice($search,1,2);
                $search=implode(" ",$search);
                $query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%' LIMIT 9") or die("could not search! Oops, Panpan database might be hacked");
                $count=mysqli_num_rows($query);
                while($row=mysqli_fetch_assoc($query)){
                $object_id=$row["object_id"];
                $object_name=$row["name"];
                $object_description=$row["description"];
                $object_up=$row["up"];
                $object_down=$row["down"];
                $object_views=$row["views"];

                $output=$object_name;
                $result= "<a class='anchor_tag_s' href='"."object.php?id=".$object_id."'><div>".$output."</div></a>";
                echo $result;
                }
            }
        }   
        else{
             // print out the like query
            while($row=mysqli_fetch_assoc($query)){
            $object_id=$row["object_id"];
            $object_name=$row["name"];
            $object_description=$row["description"];
            $object_up=$row["up"];
            $object_down=$row["down"];
            $object_views=$row["views"];

            $output=$object_name;
            $result= "<a class='anchor_tag_s' href='"."object.php?id=".$object_id."'><div>".$output."</div></a>";
            echo $result;
            }
        }
    }
    else{
          // print out the match query
        while($row=mysqli_fetch_assoc($query)){
            $object_id=$row["object_id"];
            $object_name=$row["name"];
            $object_description=$row["description"];
            $object_up=$row["up"];
            $object_down=$row["down"];
            $object_views=$row["views"];

            $output=$object_name;
            $result= "<a class='anchor_tag_s' href='"."object.php?id=".$object_id."'><div>".$output."</div></a>";
            echo $result;
        }
    }

}


?>

Answer 1

我建议绝对不要直接在按键上搜索。这是非常低效的，而且非常耗费资源。我建议设置一个计时器，比如一秒钟。然后，在启动时，将计时器刷新为一秒。如果它达到 0，然后你搜索。像这样:

timer = 1000;
started = false;

$("input[type=text]").keyup( function(){
    window.timer = 1000;

    if(window.started == false) queueTimer();
    window.started = true;
});

function queueTimer(){
    if(window.timer <= 0){
        //Timer has run out, business logic here!
        searchq();
        window.started = false;
    } else {
        window.timer -= 100;

        setTimeout(queueTimer, 100);
    }
}

将计时器设置为您想要的任何值，以毫秒为单位。我建议一秒钟，但您可以根据需要降低它。

检查这里的 fiddle :

https://jsfiddle.net/kbyy2m6u/

代码在做什么

我们立即将计时器设置为 1000 毫秒，并将 started 设置为 false。

keyup 内联函数将计时器重置为 1000 毫秒，将计时器排队，并将 started 设置为 true。我们将其设置为 true，这样 queueTimer() 函数就不会多次排队(这会否定排队即时搜索的全部意义)。一旦设置为 true，它将不会运行 queueTimer()，直到计时器用完并实际进行搜索。

queueTimer() 是这里的生计。如果定时器还没有用完，它会简单地将 timer 变量减少 100 毫秒，并调用自己在 100 毫秒后再次运行(循环直到定时器用完)。一旦用完，它会执行您的 searchq() 并再次将 started 设置为 false，以便即时搜索可以再次运行。

用简单的英语来说，每次有人在搜索框中输入内容时，它都会等待一秒钟，然后再进行即时搜索。即使在队列启动后，计时器也会在键入时重置，因此在键入时不会搜索人。这通过确保用户暂停了一点以实际进行搜索来防止多次错误搜索。

现在提醒一下

Google 是一个巨人 - 他们让神奇的事情在网络上发生。即时搜索之类的东西在理论上是很棒的，但对于我们这些无法像 Google 那样在研发上投入数十亿美元的人来说，这通常是不值得头疼的事情。

您对数据库进行的每一次调用都非常费力。如果您的 Web 应用程序上有其他功能会影响数据库，而现在您要添加即时搜索，请为一些非常有趣的副作用做好准备。由于 MySQL 引擎上的数据锁定，它们甚至可能对完全独立的数据库产生不可预见的副作用。这就是为什么数据锁定在许多 Magento 安装中如此普遍的原因之一。

我相信您知道自己在做什么，但我想确保看到这个问题的任何人都会意识到即时搜索之类的权衡。