EShein
@EShein
Shein

Как оптимизировать фильтр на Jquery?

Есть таблица, примерно на 2500 строчек, был написан "типа фильтр". Проблема в том, что он, ну очень долго работает, перед каждым вводом символа браузер повисает на пол секунды примерно. Вот сам код фильтра.
$(function(){
    $('#search').on('input', function(){
        var search = $('#search').val().toLowerCase();
        $('.search').each(function(){
            var str = $(this).find('td').data('search') || "";
            str = str.toString().toLowerCase();
            console.log(str.search(search));
            if(~str.search(search)){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
    });
});

Подскажите как можно оптимизировать сие действие?
  • Вопрос задан
  • 164 просмотра
Решения вопроса 2
Negwereth
@Negwereth
lvivcss.com.ua
1. Убрать console.log
2. Закешировать ссылки на DOM-элементы ещё до первого поиска.
Ответ написан
@imhuman
Попробуй indexOf вместо search, он быстрее, если тебе регулярки не нужны
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lazalu68
@lazalu68
Salmon
  1. По-хорошему стоило бы разделить расчёт и рендеринг, то есть одна функция решает какие элементы соответствуют фильтру, а другая занимается стилями. К тому же мне кажется что в данном случае есть смысл использовать классы, так было бы быстрее,
  2. В большинстве случаев если действия пользователя требуют каких-то значительных вычислений, особенно если речь о input, то эффективно бывает их отложить - не сразу выполнять всё, а давать пользователю время ввести запрос и только потом всё считать. Например, как здесь в поиске сверху. Еще меньше лишней нагрузки было бы при наличии некой кнопки, которая стартовала бы расчёты по нажатию на неё,
  3. Наконец, зависания можно вообще исключить, выполняя расчёты в отдельном потоке с помощью Web Worker.


Покажите новую версию кода.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы