jQuery Academy · Урок

Эффективная обработка событий и регулирование частоты

«Эффективная обработка событий и регулирование частоты» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Перегрузка событий: проблема производительности

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

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

Проблема: слишком частое срабатывание событий

Посмотрим, как часто может срабатывать обычное событие, например scroll, без какой-либо оптимизации. Откройте консоль или следите за счётчиком во время прокрутки.

Обратите внимание, как быстро увеличивается счётчик: это означает, что за короткое время выполняется множество вызовов функций. Это может быть очень неэффективно.

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

Знакомство с регулированием частоты вызовов

Регулирование частоты вызовов — это метод, ограничивающий частоту вызова функции в течение определённого периода. Он гарантирует, что функция выполнится не более одного раза за заданный интервал времени.

Представьте себе ворота, которые открываются только каждые 200 миллисекунд. Сколько бы раз Вы ни пытались пройти, пройти можно только тогда, когда ворота открыты.

Регулирование частоты вызовов на практике

Вот простой инструмент для регулирования частоты вызовов. Он гарантирует, что обработчик прокрутки будет выполняться не чаще одного раза в 200 миллисекунд. Это значительно уменьшает количество вызовов во время непрерывной прокрутки.

Сравните этот пример с предыдущим. Счётчик обновляется плавно, но реже, благодаря чему экономятся ресурсы.

<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Throttled Scroll Count: 0</div>
  <p>Scroll down. The count updates less frequently.</p>
  <script>
    // A simple throttling utility function
    function throttle(func, delay) {
      let canRun = true;
      return function(...args) {
        if (canRun) {
          func.apply(this, args);
          canRun = false;
          setTimeout(() => canRun = true, delay);
        }
      };
    }

    $(document).ready(function() {
      let count = 0;
      const throttledScroll = throttle(function() {
        count++;
        $('#status').text('Throttled Scroll Count: ' + count);
      }, 200); // Update at most every 200ms

      $(window).on('scroll', throttledScroll);
    });
  </script>
</body>
</html>

Знакомство с устранением дребезга

Устранение дребезга — это ещё один метод, который откладывает выполнение функции до тех пор, пока после последнего срабатывания события не пройдёт определённое время.

Представьте лампу, которая выключается только после того, как Вы перестали двигаться на 1 секунду. Если Вы продолжаете двигаться, таймер запускается заново. Функция выполняется только после того, как пользователь прекращает действие на указанную задержку.

Устранение дребезга на практике

Здесь мы применяем устранение дребезга к событию keyup текстового поля ввода. Состояние обновляется только после того, как Вы перестанете печатать на 500 миллисекунд.

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

<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { font-family: sans-serif; margin: 0; padding: 20px; }
  input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
  #status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
  <p>Type into the box. The status updates only after you pause.</p>
  <input type="text" id="myInput" placeholder="Start typing...">
  <div id="status">Last typed: (none)</div>
  <script>
    // A simple debouncing utility function
    function debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    $(document).ready(function() {
      const debouncedLog = debounce(function(event) {
        $('#status').text('Last typed: ' + $(event.target).val());
      }, 500); // Wait 500ms after typing stops

      $('#myInput').on('keyup', debouncedLog);
    });
  </script>
</body>
</html>

Регулирование частоты вызовов и устранение дребезга: ключевые различия

Оба метода оптимизируют обработку событий, но служат разным целям:

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

Выбор подходящего метода зависит от конкретного сценария использования.

Практические сценарии использования

Вот распространённые сценарии для каждого метода:

Регулирование частоты вызовов:
- Изменение размера окна
- Прокрутка страницы
- Перетаскивание объектов
- Обновления в игре (например, выстрел из оружия)
Устранение дребезга:
- Ввод в строку поиска (автодополнение)
- Проверка формы после ввода данных пользователем
- Сохранение содержимого в текстовом редакторе
- Вызов API после того, как пользователь перестал печатать

Интеграция с событиями jQuery

Вы можете легко интегрировать эти вспомогательные функции с методами обработки событий jQuery, такими как .on() или .bind(). Просто передайте функцию с регулированием частоты вызовов или устранением дребезга в качестве обработчика события.

$(window).on('resize', throttle(myResizeHandler, 250));

$('#search-input').on('keyup', debounce(searchFunction, 300));

Это позволяет поддерживать эффективность обработчиков событий и отзывчивость приложения.

Преимущества для производительности

Применение регулирования частоты вызовов и устранения дребезга даёт несколько преимуществ для производительности:

Снижение нагрузки на CPU: меньшее количество вызовов функций означает меньший объём работы для браузера.
Более плавный интерфейс: предотвращает рывки анимаций и зависание интерфейса.
Более удобная работа для пользователя: приложение воспринимается как более быстрое и плавное.
Оптимизированные вызовы API: предотвращает отправку серверу лишних запросов.

Быстрая проверка оптимизации событий

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

Итоги и дальнейшие шаги

Отличная работа! Вы изучили два мощных метода оптимизации обработки событий:

Регулирование частоты вызовов: ограничивает частоту вызова функции.
Устранение дребезга: откладывает выполнение функции до окончания периода бездействия.

Освоив эти методы, Вы значительно улучшите производительность и отзывчивость своих приложений на jQuery. Поэкспериментируйте с различными задержками, чтобы найти оптимальное значение для Вашего сценария!

Часто задаваемые вопросы

Урок «Эффективная обработка событий и регулирование частоты» бесплатный?

Да — полный текст урока «Эффективная обработка событий и регулирование частоты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Эффективная обработка событий и регулирование частоты»?

Реализуйте ограничение частоты и устранение дребезга для часто вызываемых событий, таких как изменение размера или прокрутка, предотвращая избыточные вызовы функций и повышая отзывчивость. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Эффективная обработка событий и регулирование частоты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Оптимизация операций с DOM
Эффективная обработка событий и регулирование частоты
Использование кэширования и отложенных объектов

← Назад к jQuery Academy