Question

我有一个用于搜索我的照片网站的文本框。当用户输入时，我不想显示建议列表，而是显示结果计数，通知我的用户有关于他们输入内容的照片。

我将在我的文本框中添加一个'onChange'事件，它将调用我的AJAX函数。然后，该函数将收集已经输入的内容，将AJAX收集到我生成计数的ASP页面并将其发回显示。

我知道如何实现这一点，但我不知道它将如何在性能上发挥作用。我预见的问题是，如果用户键入一个非常长的字符串，真的很快，它可能需要进行50次调用（对于字符串中的每个字符）。产生计数的ASP / SQL搜索查询也非常大，可能需要0.8到1.0秒才能生成计数。

这会给我带来麻烦吗？这将如何实际工作？如果用户正在键入字符42，那么AJAX是否仍在处理字符12，试图赶上用户？它会堵塞吗？如果另外一个电话是否取消了旧电话，如果它没有得到回应？

感激地收到任何建议/经验。

Answer 1

我通常为自己的应用程序提供的解决方案是仅在用户停止键入一段时间（例如，0.75秒）后才启动ajax请求。对于每次击键，[重新]启动javascript超时（setTimeout）一段时间（可能是0.75秒）。用户生成的每次击键都会取消此超时并重新启动它。这样，ajax只会在用户未在该段时间内输入任何内容（0.75秒）后发生。这是一些要演示的代码。

var __global_timeout = null;
function getResultCountWrapper () {
    if (__global_timeout)
        clearTimeout(__global_timeout);
    __global_timeout = setTimeout(getResultCount, 0750);
}

function getResultCount () {
    // ajax call goes here.
}

这是您在文本输入框中的位置。

<input type="text" onchange="getResultCountWrapper()";>

这是一个完整的网页，其工作原理如下：

<html>
  <head>
    <script type="text/javascript">
      var __global_timeout = null;
      function getResultCountWrapper () {
        if (__global_timeout)
          clearTimeout(__global_timeout);
        __global_timeout = setTimeout(getResultCount, 0750);
      }

      function getResultCount () {
        // ajax call goes here.
        alert('wee');
      }

    </script>
  </head>
  <body>
    <input type="text" onchange="getResultCountWrapper()";>
  </body>
</html>

Textbox Onchange获取结果计数

1 个答案: