JQueryUI自动完成如何处理异步结果

How does JQueryUI Autocomplete handle asynchronous results?

本文关键字：处理 异步 结果 何处理 JQueryUI      更新时间：2023-09-26

我很难理解JQueryUI的自动完成函数如何处理导致异步结果的重复按键。我需要一些功能类似的东西，但我无法正确获得自动完成的结果。示例：

$(document).ready(function() {
    $('#textinput').live('keyup', function() {
        $.get('bacon.php', function(data) {
             $('#holder').html(data);
        });
    });
});

问题是，如果快速键入，结果往往不会按正确的顺序返回。如果我键入单词"KEY"，我可能会得到"K"、"KEY"answers"KE"的结果，从而混淆#holder的内容。我注意到JQueryUI自动完成没有这个问题，但我不明白它是如何处理的。

我还没有查看jQuery关于这个特定问题的自动完成功能，但我对自定义自动完成脚本所做的是，如果在特定时间内按下了另一个键，我会中止XHR请求。类似这样的东西：

 var xhr, throttle;
 $('.autocomplete').keyup(function() {
      var $this = $(this);
      if (throttle)
         clearTimeout(throttle); // Clear the previous request
      xhr.abort(); // Abort the last XHR request
      throttle = setTimeout( function() {
          xhr = $.getJSON('autocomplete.php', { data: $this.val() }, function(data) {
              // do something with response
          });
      }, 250); // wait 250 milliseconds before running this
 });

基本上，节流阀确保我们在发送请求之前等待250毫秒，以防用户仍在键入（您可以将其设置为任何值）。"xhr"变量将XMLHttpRequest保存在一个变量中，如果我们得到另一个按键，而响应还没有返回，那么我们中止前一个按键的操作，确保只有最新的一个按键返回响应。

希望能有所帮助。

祝你好运：）

我只是在做一些非常相关的事情。一个简单的"延迟"API，用于将函数转换为延迟委托。

Function.prototype.delayed = function(ms, reset)
{
    var timeout;
    var fn = this;
    return function()
    {
        var args = arguments;
        var scope = this;
        if (reset && timeout) clearTimeout(timeout);
        timeout = setTimeout(function() { fn.apply(scope, args) }, ms);
    };
};

样品使用见小提琴。

在你的情况下，它会像这个

$(document).ready(function() {
    $('#textinput').live('keyup', (function() {
        $.get('bacon.php', function(data) {
            $('#holder').html(data);
        });
    }).delayed(300, true));
});

遇到了完全相同的问题，并偶然发现了Addy Osmani提到的代理模式。

我认为它与实时观测者事件更相关

$( "button" ).on( "click", function () {
    setTimeout( $.proxy( function () {
        // "this" now refers to our element as we wanted
        $( this ).addClass( "active" );
    }, this), 500);
});

希望对有所帮助

相关文章：