JQuery оптимизация фильтра (низкая производительность на мобильных устройствах)

Question

У меня есть список из примерно 200 пунктов (в строках таблицы):

<tr><td><h5>Title</h5></td> 
    <td class="nazwa">some text</td> 
    <td>Some additional stuff</td> 
</tr> 

Я создал функцию JQuery, который фильтрует (показывает или скрывает) элементы, если они матч искал строку

jQuery.fn.filterItems = function(str){ 
    var title = jQuery(this).find("h5").text().toLowerCase(); 
    var name = jQuery(this).find(".nazwa").text().toLowerCase(); 
    if(title.search(str) < 0 && name.search(str) < 0){ 
     jQuery(this).hide().removeClass("visible"); 
    } 
    else{ 
     jQuery(this).show().addClass("visible"); 
    } 
    return this; 
} 

Каждый раз, когда пользователь вводит что-то в поисковый ввод автоматически фильтрует элементы и показывает те, соответствующие входной:

jQuery("#search_items").on("input", function(){ 
     var s = jQuery(this).val(); 
     if(s != ""){ 
      jQuery('.list-of-items tr').each(function(){ 
       jQuery(this).filterItems(s.toLowerCase()); 
      }); 
     } 
     else{ 
      jQuery('.list-of-items tr').show().addClass("visible"); 
     } 
    }); 

Это отлично работает на ПК, но у меня есть проблемы с производительностью на мобильных устройствах. Иногда между входом и фильтрацией происходит довольно задержка.

Как я могу оптимизировать этот живой поиск с точки зрения эффективности/использования ресурсов?

Answer 1

Это могло бы помочь: https://davidwalsh.name/javascript-debounce-function.

// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

Вы должны обернуть функцию обработки события (в вашем случае input) с debounce() сверху.

Просто читать больше о debounce and throttle

Если у вас есть проект, который использует угловую будет гораздо проще и быстрее: https://docs.angularjs.org/api/ng/filter/filter.