Самая основная функция JavaScript на веб -страницах - прослушать или реагировать на действия пользователя, что очень полезно. Действия некоторых пользователей очень часты, в то время как другие очень редки. Некоторые функции слушателя выполняются как молния, в то время как некоторые тяжелые, чтобы перетащить браузер до смерти. Возьмите, к примеру, событие Resisize окна браузера. Это событие будет вызвано один раз в каждом изменении масштаба в размере окна браузера. Если слушатель большой, ваш браузер скоро будет перетаскиваться.
Очевидно, мы не можем позволить браузеру быть перетаскиваемым, но мы не можем удалить слушателя. Тем не менее, мы можем ограничить частоту функциональных вызовов и ослабить влияние работы функции события. По сравнению с тем, чтобы позволить изменить размер окна запустить функцию слушателя один раз, мы теперь можем прослушать минимальный интервал запуска функции, который должен быть больше, чем сколько миллисекунд, чтобы он сохранял разумный канал вызовов и гарантирует, что опыт пользователя не разрушает. Существует хорошая библиотека инструментов JS под названием Underscore.js, которая имеет простой метод, который позволяет легко создавать слушателей, которые уменьшают частоту запуска функций событий.
Код JavaScript
Код для прослушивателя Downswitch прост:
Кода -копия выглядит следующим образом:
// Создать слушателя
var updateLayout = _.debounce (function (e) {
// здесь обновляется все макет
}, 500); // запускаться один раз каждые 500 миллисекунд.
// Добавить слушатель событий
window.addeventListener («resize», updateLayout, false);
... Базовый уровень этого кода underscore.js фактически использует интервал для проверки частоты вызовов функции события:
// возвращает функцию, которая, пока она продолжает быть вызванной, не будет
// быть запускаемым. Функция будет вызвана после того, как перестанет призывать к
// n миллисекунд. Если `necoticate 'пройден, запустите функцию на
// передний край вместо следа.
_.debounce = function (func, подождите, немедленно) {
временный интервал var;
return function () {
var context = this, args = аргументы;
var позже = function () {
Тайм -аут = null;
if (! Непосредственно) func.apply (контекст, args);
};
var callnow = сразу &&! Timeout;
ClearTimeout (тайм -аут);
timeout = settimeout (позже, подождите);
if (callnow) func.apply (контекст, args);
};
};
Код не особенно сложный, но это также своего рода счастье, чтобы не писать его самостоятельно. Эта функция дебюра не зависит от других функций underscore.js, поэтому вы можете добавить этот метод в свою любимую библиотеку инструментов JS, такую как jQuery или Mootools, что легко:
Кода -копия выглядит следующим образом:
// Mootools
Function.implement ({
Debounce: function (подождите, немедленно) {
Тайм -аут var,
func = это;
return function () {
var context = this, args = аргументы;
var позже = function () {
Тайм -аут = null;
if (! Непосредственно) func.apply (контекст, args);
};
var callnow = сразу &&! Timeout;
ClearTimeout (тайм -аут);
timeout = settimeout (позже, подождите);
if (callnow) func.apply (контекст, args);
};
}
});
// Используйте его!
window.addevent ("resize", myfn.debounce (500));
Как упомянуто выше, событие изменения размера окна является наиболее распространенным местом для использования частоты. Другое распространенное место состоит в том, что призвание автоматического завершения дается на основе ввода ключа пользователя. Мне очень нравится собирать такие фрагменты кода, что может легко сделать ваш сайт более эффективным. В то же время я также рекомендую вам изучать underscore.js, который обеспечивает большое количество очень полезных функций.