Во время веб-разработки в области веб-интерфейса мы будем вынуждены повышать производительность функции, но иногда, так или иначе, существуют функции, которые нельзя изменить или нельзя оптимизировать, поскольку они уже выполняют задачу.
Тем не менее, но мы можем предотвратить его выполнение каждую миллисекунду и заставить его выполняться только 1 раз Икс миллисекунды и выполнить задачу один раз. Отклоненные функции не выполняются при вызове, они ждут паузу вызовов в течение настраиваемой продолжительности перед выполнением, каждый новый вызов перезапускает таймер.
Для этого мы будем использовать дребезга функция, которая поможет нам в нашей миссии, и заключается в следующем:
/**
* Execute a function given a delay time
*
* @param {type} func
* @param {type} wait
* @param {type} immediate
* @returns {Function}
*/
var debounce = function (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);
};
};В большинстве случаев эта функция значительно увеличивает производительность в зависимости от использования, например:
1) При изменении размера события
Если мне нужно изменять размер многих элементов с помощью javascript каждый раз, когда окно изменяется, это будет означать интенсивное рекурсивное потребление. Использование debounce приведет к тому, что событие resize будет инициировано только 1 раз в соответствии с изменением размера окна.
$(window).resize(debounce(function(){
// the following function will be executed every half second
executeMyReallyHeavyTask();
},500)); // Milliseconds in which the task should be executed (500 = half second)2) По событию keyup
Если вы делаете свое собственное автозаполнение, вам нужно будет запретить, чтобы при каждом нажатии кнопки выполнялся вызов на сервер. Использование debounce приведет к тому, что только один Ajax-вызов будет выполнен для событий прессы.
$('#myInput').keyup(debounce(function(){
// the following function will be executed every half second
makeAjaxCall();
},500)); // Milliseconds in which the ajax call should be executed (500 = half second)Debounce увеличит производительность ваших функций постоянного исполнения в краткой и элегантной форме.
