"Отложенное выполнение функции после resize в JQuery"

Быстрый ответ

Если вам необходимо вызвать функцию после того, как изменение размера окна будет завершено, вы можете использовать метод "debounce" в JavaScript. Вот пример его реализации:

function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
    };
}

window.addEventListener('resize', debounce(function() {
    console.log('Окончание изменения размера окна!');
}, 250));

Этот пример кода вызывает функцию console.log через 250 миллисекунд после завершения изменения размеров окна.

Оптимизация производительности

Обработчики событий изменения размера окна могут вызываться десятки раз в секунду, что может негативно влиять на производительность системы, особенно в сложных приложениях или на слабых устройствах. Рассмотрим некоторые методы оптимизации, чтобы поддерживать высокую производительность приложений:

Рассмотрим метод throttle

Метод "throttle" позволяет ограничить количество вызовов функции до определённого количества раз за заданный промежуток времени:

function throttle(fn, interval) {
    let isThrottled = false;
    return function() {
        if (!isThrottled) {
            fn.apply(this, arguments);
            isThrottled = true;
            setTimeout(function() {
                isThrottled = false;
            }, interval);
        }
    };
}

window.addEventListener('resize', throttle(function() {
    console.log('Произошло изменение размера окна!');
}, 250));

Подробнее об этом расскажет наш спикер на видео

Использование уникальных идентификаторов для избегания конфликтов

Для избежания конфликтов между обработчиками событий используйте уникальные идентификаторы:

const createDebounceHandler = (function() {
    const timers = {};
    return function(fn, delay, id) {
        if (!id) id = "uniqueId";
        return function() {
            if (timers[id]) {
                clearTimeout(timers[id]);
            }
            timers[id] = setTimeout(fn, delay);
        };
    };
})();

Оптимизация работы с Lodash или Underscore.js

Если вы уже используете библиотеки Lodash или Underscore.js в вашем проекте, то вы можете воспользоваться их встроенными функциями debounce:

window.addEventListener('resize', _.debounce(function() {
    console.log('Окончание изменения размера окна!');
}, 250));

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

Визуализация

Посмотрим на примере, как работает задержка вызова события после окончания изменения размера окна.

1. 🪟🔨 Начинаем изменять размер окна.
2. 🪟🔄 Размер окна меняется..
3. 🪟✋ Окончание изменения размера.

Дайте окончанию изменения размера "подышать"!

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        console.log('Окончание изменения размера окна! 🎉');
    }, 250);
});

Воспринимайте таймер как систему ожидания:

🪟🚍 Каждое изменение размера окна – это приезд автобуса. 🕒 Мы ждем 250 мс перед приходом следующего "автобуса". 🎉 Если за 250 мс изменений не происходит, значит, изменение размера окна окончательно завершено!

Это птица, это самолет, это... resizeEnd?

В сложных сценариях может быть полезно создать настраиваемое событие, чтобы отслеживать окончание изменения размера окна:

$(window).on('resize', debounce(function() {
    $(window).trigger('resizeEnd');
}, 250));

$(window).on('resizeEnd', function() {
    console.log('Выполнена пользовательская обработка окончания изменения размера!');
});

Хранение таймеров в глобальных переменных или в data-атрибутах

Для удобного доступа к таймерам их можно хранить в глобальных переменных или в data-атрибутах:

function onResizeComplete() {
    console.log('Окончание глобального события изменения размера окна!');
}

$(window).resize(function() {
    var timer = $.data(this, 'resizeTimer');
    clearTimeout(timer);
    $.data(this, 'resizeTimer', setTimeout(onResizeComplete, 250));
});

Такой подход позволяет более гибко управлять задержкой вызова событий и избегает потенциальных конфликтов.

Полезные материалы

1. Событие изменения размера окна – Web API | MDN – подробное руководство по обработке события resize.
2. событие resize | Документация по jQuery API — документация по методу .resize() в jQuery.
3. Debounce и Throttle: объяснение через примеры | CSS-Tricks – объяснение debounce и throttle на практических примерах.
4. Понимание делегирования событий | Учебный центр jQuery — все о делегировании событий в jQuery.
5. lodash.debounce – пакет npm — npm пакет debounce от lodash.
6. Underscore.js — документация по функции debounce в библиотеке Underscore.js.
7. Изучение адаптивного дизайна | web.dev — руководство от Google по адаптивному дизайну, что важно при обработке событий изменения размера окна.