Existe alguma maneira de acelerar esta solução para um jQuery case-insensitive: contém seletor?
-
05-07-2019 - |
Pergunta
este solução para um seletor jQuery :contains
case-insensitive em StackOverflow. Ele funciona muito bem, no entanto, ele vem com o custo de desempenho. Alguém mais encontrar esta solução a ser um pouco lento?
Eu estou usando o seletor :contains
para procurar uma mesa. O usuário digita uma seqüência de pesquisa em uma caixa de texto. Para cada keystroke, ele procura a tabela para aquela corda, mostrando apenas as linhas que contêm essa seqüência através do selector :contains
. Antes de implementar a solução case-insensitive, esta pesquisa foi rápido e ágil. Agora, com esta solução, ele trava por um breve momento depois de cada tecla.
Algumas ideias sobre como esta solução poderia ser acelerado?
Solução
Eu encontrei outra solução da busca case-insensitive no Google (veja Eric Phan ) que varia ligeiramente do que eu estava originalmente usando.
Original:
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
EricPhan:
return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;
Comparando os dois, você pode ver a solução de Eric Phan acessa os atributos DOM diretamente e usos toLowerCase()
vez de toUpperCase()
. O último realmente não importa, mas o primeiro é o que realmente melhorou o desempenho da busca case-insensitive. Apenas mudando a solução original para uso (a.textContent || a.innerText || "")
vez de jQuery(a).text()
fez toda a diferença!
Agora eu sou um pouco curioso, então aqui está um acompanhamento pergunta: Qual é o negócio com jQuery.text()
? Por que é tão lento? Eu tenho minhas suposições, mas eu adoraria ouvir o que os especialistas têm a dizer.
Por fim, obrigado a todos que responderam. I appreicate sua ajuda. =)
Outras dicas
Você poderia tentar verificar o seletor apenas uma vez, depois que o usuário parou de escrever para um determinado período de tempo, e não para cada tecla pressionada.
Por exemplo, uma implementação simples:
Uso:
$("#textboxId").keyup(function () {
typewatch(function () {
// executed only 500 ms after the user stopped typing.
}, 500);
Implementação:
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
}
}();
você poderia tentar não verificar após cada toque de tecla, mas talvez um segundo após o último toque de tecla foi pressionada. Desta forma, você não está constantemente verificando enquanto o usuário está digitando, mas sim verificar quando o usuário estiver concluído ou pausar digitação.
aqui está um acompanhamento pergunta: O que é o acordo com jQuery.text ()? Por que é isso tão lento?
Eu suspeito que ele é lento devido ao $(a)
(convertendo o elemento DOM em um objeto jQuery) e não a .text()
.
Para adicionar ao que Jason disse, você pode tentar usar este plugin para conseguir isso.