Question

我在StackOverflow上找到了一个不区分大小写的jQuery :contains选择器的this solution。它运行良好，但它以性能为代价。有没有其他人觉得这个解决方案有点慢？

我正在使用:contains选择器来搜索表格。用户在文本框中键入搜索字符串。对于每次击键，它会在表中搜索该字符串，仅通过:contains选择器显示包含该字符串的行。在实施不区分大小写的解决方案之前，此搜索快速而且快速。现在有了这个解决方案，它会在每次击键后锁定一小段时间。

关于如何加快解决方案的任何想法？

Answer 1

我在Google上找到了另一种不区分大小写的搜索解决方案（请参阅Eric Phan），该搜索与我最初使用的搜索略有不同。

<强>原始

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

<强> EricPhan：

return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;

比较两者，您可以看到Eric Phan的解决方案直接访问DOM属性并使用toLowerCase()而不是toUpperCase()。后者并不重要，但前者真正改善了不区分大小写搜索的性能。只需更改原始解决方案即可使用(a.textContent || a.innerText || "")代替jQuery(a).text()，这一切都有所不同！

现在我有点好奇，所以这是一个跟进问题：与jQuery.text()有什么关系？为什么这么慢？我有我的假设，但我很想听听专家们的意见。

最后，感谢所有回复的人。我恭维你的帮助。 =）

Answer 2

在用户停止键入指定的时间后，您可以尝试仅检查一次选择器，而不是每次击键。

例如，一个简单的实现：

用法：

$("#textboxId").keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the user stopped typing.
  }, 500);

实现：

var typewatch = function(){
    var timer = 0;  // store the timer id
    return function(callback, ms){
        clearTimeout (timer);  // if the function is called before the timeout
        timer = setTimeout(callback, ms); // clear the timer and start it over
    }  
}();

Answer 3

你可以在每次击键后尝试不检查，但也许在按下最后一次击键后一秒钟。这样你就不会在用户输入时不断检查，而是检查用户何时完成或暂停打字。

Answer 4

这是一个后续问题：什么是与jQuery.text（）的交易？为什么呢这么慢？

我怀疑它由于$(a)（将DOM元素转换为jQuery对象）而不是.text()而缓慢。

Answer 5

要添加杰森所说的内容，您可以尝试使用this plugin来实现这一目标。

有没有办法加速这个解决方案不区分大小写的jQuery：包含选择器？

5 个答案: