Оптимизация кода для более быстрого реагирования на сенсорное событие

Question

Оптимизация кода для более быстрого реагирования на сенсорное событие

0

Я использую шрифт awesome для значков и чтобы они включали событие click (touch). У меня этот HTML.

<i class="fa fa-circle-o hidden-md hidden-lg"></i>

И используйте этот jquery, чтобы идти туда и обратно.

$('body').on('click','.fa-check-circle-o, .fa-circle-o', function() {
    $(this).toggleClass('fa-check-circle-o fa-circle-o');
});

Из числа выполненных операций наблюдается заметное отставание:

Обнаружение события кликов
Класс коммутатора
Найти CSS
Перерисовать CSS

Задержка заставит пользователей дважды щелкнуть мышью, считая, что их первоначальный щелчок не работает. Как я могу сделать эту операцию быстрее?

(Шрифт awesome - это локальный файл, jquery - cdn, CSS - 6KB, используя Angular)

Спасибо за любые предложения.

tiffylou 19 фев. 2014, в 23:57

Источник

0

Наличие $('body') первом месте может быть настоящим тормозом. Можете ли вы поместить свои <i> в <div id="someAwesomeID"></div> а затем использовать $('#someAwesomeID') потому что это будет НАМНОГО быстрее, по крайней мере, с точки зрения производительности селектора.
MonkeyZeus 19 фев. 2014, в 22:04
0

для задержки клика github.com/ftlabs/fastclick
A. Wolff 19 фев. 2014, в 22:05
0

Я использую виды с углом, что делает его сложным, так как он не распознает элемент не на «главной странице». Этот элемент встроен в одно из представлений.
tiffylou 20 фев. 2014, в 15:21

Показать ещё 1 комментарий

Теги:

jquery

performance

font-awesome

3 ответа

0

вы можете использовать Simple-Touch. Прочитайте документы, вы можете просто установить идентификатор для своих элементов, и он работает, и он очень оптимизирован для прикосновения к устройствам.

Developia 13 авг. 2015, в 08:27

0

Это лучший селектор для добавления функции щелчка

$('.fa-check-circle-o, .fa-circle-o').on('click', function() {
    $(this).toggleClass('fa-check-circle-o fa-circle-o');
});

Хотя я думаю, что ваша проблема может заключаться в загрузке шрифта awesome font, а не в скорость события touch. Просто проверьте, соответствует ли скорость события событию с предупреждением или что-то выводит на консоль. Тогда, по крайней мере, вы знаете, в чем проблема.

2pha 19 фев. 2014, в 23:24

Ещё вопросы

Наличие $('body') первом месте может быть настоящим тормозом. Можете ли вы поместить свои <i> в <div id="someAwesomeID"></div> а затем использовать $('#someAwesomeID') потому что это будет НАМНОГО быстрее, по крайней мере, с точки зрения производительности селектора.
для задержки клика github.com/ftlabs/fastclick
Я использую виды с углом, что делает его сложным, так как он не распознает элемент не на «главной странице». Этот элемент встроен в одно из представлений.

tiffylou · Accepted Answer · 2014-02-20T15-02-00.000Z

Спасибо вам за ваши предложения. Я использовал событие click в jquery, когда я должен был использовать touchstart. Теперь он работает очень быстро!

$('body').on('touchstart click','.fa-check-circle-o, .fa-circle-o', function(e) {
    e.stopPropagation(); e.preventDefault();
    $(this).toggleClass('checked');
    $(this).toggleClass('fa-check-circle-o fa-circle-o');
});