有沒有辦法加速這個解決方案不區分大小寫的jQuery：包含選擇器？

Question

我找到了一個不區分大小寫的jQuery的解決方案 :contains在StackOverflow上:contains選擇器。 它運行良好，但它以性能為代價。 有沒有其他人覺得這個解決方案有點慢？

我正在使用: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

要添加到jason所說的內容，您可以嘗試使用此插件來實現這一目標。