AJAX：在表单字段中输入时搜索延迟[重复]

Posted 2023-02-22

【中文标题】AJAX：在表单字段中输入时搜索延迟[重复]

【英文标题】：AJAX: Delay for search on typing in form field [duplicate]

【发布时间】：2011-12-12 13:10:35

【问题描述】：

在我的网站上，我使用 javascript/AJAX 进行搜索并在用户仍在输入时显示结果。

HTML（正文）：

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p>
</form>

JavaScript（标题）：

function doSearch(text) 
    // do the ajax stuff here
    // call getResults.php?search=[text]

但这可能会导致大量请求到达服务器。

因此我想通过设置延迟来缓解服务器：

每当触发 onkeyup 事件时，函数 doSearch() 应显示“ajax 加载图形”并等待 2 秒。只有在这 2 秒内没有再次触发事件时，才应从 PHP 文件中获取结果。

有没有办法做到这一点？请问你能帮帮我吗？提前致谢！

【问题讨论】：

从技术上讲，这个问题之前没有被问过，而是三年后。

【参考方案1】：

var delayTimer;
function doSearch(text) 
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() 
        // Do the ajax stuff
    , 1000); // Will do the ajax stuff after 1000 ms, or 1 s

【讨论】：

太棒了。谢谢！

谢谢。比我所拥有的要简单得多。

像专业人士一样！谢谢！

这是准确而简洁的。谢谢。

【参考方案2】：

只需使用 setTimeout() 设置延迟调用，然后在每个事件上使用 clearTimeout() 再次删除它

HTML

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p>
</form>

Javascript

var timeout = null;

function doDelayedSearch(val) 
  if (timeout)   
    clearTimeout(timeout);
  
  timeout = setTimeout(function() 
     doSearch(val); //this is your existing function
  , 2000);

【讨论】：

谢谢！顺便说一句，我喜欢你保持我选择的代码的分离和风格。让提问者很容易利用你的答案...

【参考方案3】：

对于这种类型的事情，我倾向于使用 Remy Sharp 创建的一个狡猾的小“节流”功能：

http://remysharp.com/2010/07/21/throttling-function-calls/

【讨论】：

非常感谢！这个节流功能是一件非常有趣的事情。我真的很喜欢你可以在每个用例中使用它。