用户在几秒钟不活动后执行ajax代码

时间:2009-08-05 19:27:10

标签: javascript ajax delay delayed-execution

我是新来的,所以请放轻松我。这有点令人困惑。 :)

我正在处理搜索输入,其中用户在搜索文本框中输入另一个用户的名称(或名称的一部分),然后返回与该搜索字符串匹配的用户列表。问题是当涉及成千上万的用户时,它有点慢。由于这种缓慢,当用户在搜索输入中快速输入名称时,屏幕将开始闪烁每个键击的搜索结果(在用户已经输入搜索字符串之后)。这就像一个严重延迟的反应。

例如,如果我输入名称'Wendy',搜索字符串'W'(我输入的第一个字符)的搜索结果甚至都不会显示。然后将显示字母“W”的搜索结果,然后显示“我们”,依此类推,即使我已经输入了全名,只是想看到'Wendy'的结果。

我想要做的只是当用户在一段时间内没有输入任何东西时进行搜索(我想的是两秒钟)。否则,将显示“搜索”一词。 Javascript方法的代码如下。就像一个注释,该代码目前用于搜索用户,我只需要实现延迟执行。

function updateSearchResults() {
    if($F('searchString').length > 0){
        Element.update($('searchResultsScrollBox'), '<h3>Searching...</h3>'); 
        $('searching').style.display = 'block';
        var url = '<c:url value='ajaxFrontGetUsers.html'/>';
        var ajax = new Ajax.Updater({success: 'searchResults'}, url,
        {method: 'post', parameters: $('searchForm').serialize(true)});
         $('searching').style.display = 'none';
     }
}

我希望这一切都有道理。提前感谢任何可以提供帮助的人。

4 个答案:

答案 0 :(得分:2)

请尝试以下步骤:

  1. 每隔几毫秒,检查一下文本框中是否有新数据。
  2. 如果文本框有新文本,请执行Ajax,并将文本复制到变量(在步骤1中进行比较)。
  3. 如果要从那里提高性能,请在用户键入内容时激活计时器,并在进行Ajax调用时将其停用。

答案 1 :(得分:0)

嘿,谢谢你的回答。 我最终设置了500毫秒的间隔,其中javascript函数将持续检查以查看在500毫秒时间段内是否在搜索字符串中输入了新字符。如果是,则调用搜索功能以搜索用户输入的字符串。否则,它会再等500毫秒,直到用户停止输入。最后,它与你提出的非常相似。 再次感谢!

答案 2 :(得分:0)

或者你可以在清除某些全局变量的项目上放置一个“onkeypress”事件处理程序,或取消一个计时器以防止AJAX事件被触发。我知道Prototype通过它的就地编辑器和“频率”选项为你实现了这一点。 (我相信它会设置一个超时计时器,它会在每次按键后取消。)

答案 3 :(得分:0)

我知道这是一个古老的问题,但对于其他人来看,我认为你的做法是错误的。我认为你应该对每个ajax调用进行日期/时间标记,并在你的javascript中跟踪数据时间戳。然后,当返回ajax调用时,您可以检查日期/时间戳并确保它是最重新发送的ajax调用的结果集。通过这种方式,您可以立即对每次击键进行ajax调用,但只有在ajax结果符合键入时才会显示结果。

另外,您是否发送了所有匹配结果?只有字母W的数千?为了加快javascript方面,你可能应该在数据库中对结果进行排名并仅返回前10-20。不管怎么说,不希望看到超过10-20个结果。

此外,您的SQL查询是否最佳?好像查询花了太长时间。如果你做一个像搜索这样的单方面(即。like input+'%')而不是像搜索这样的双面(即like '%' + input + '%'),那么你可以在桌面上找到一些非常好的索引来帮助你。