javascript - jQuery 自动完成性能随着每次搜索而下降

Question

我遇到了 jQuery 自动完成插件的问题。

通过使用术语“item”搜索多次，起初它工作正常:鼠标悬停时的 css 类添加得很好，一切都很顺利。通过单击弹出窗口外部将其关闭并在每次一切似乎都变慢时再次键入:

我在 Chrome 上测试过它，它变得非常慢，在 Firefox 上测试它似乎处理得更好一些，但也有性能下降。

这是一个代码非常简单的 fiddle : https://jsfiddle.net/re9psbxy/1/

还有代码:

var suggestionList = [];
for (var i = 0; i < 200; i++) {
  suggestionList.push({
    label: 'item' + i,
    value: i
  });
}

//initialize jQueryUI Autocomplete
jQuery('#autocomplete').autocomplete({
  source: suggestionList
});

HTML:

<input type="text" id="autocomplete"/>

Answer 1

我在我的一个应用程序上遇到了与自动完成相同的问题。第一次打开自动完成会非常快，但几次后就几乎没用了。问题似乎是自动完成功能似乎正在使用的菜单小部件中的内存泄漏。您可以通过将此添加到自动完成的搜索功能来查看问题:

search: function(e,ui){
 console.log($(this).data("ui-autocomplete").menu.bindings.length);
}

每次搜索时，您都会看到绑定(bind)的长度不断增加。要解决此问题，只需在每次搜索时清除绑定(bind)即可:

search: function(e,ui){
 $(this).data("ui-autocomplete").menu.bindings = $();
}

我将这个建议的解决方法发布到打开的 jquery ui 错误:https://bugs.jqueryui.com/ticket/10050