Планирование: метод isInputPending()

Метод isInputPending() интерфейса Scheduling позволяет проверить, есть ли ожидающие события ввода в очереди событий, указывающие на то, что пользователь пытается взаимодействовать со страницей.

Эта функция может быть полезной в ситуациях, когда у вас есть очередь задач, которые нужно выполнить, и вы хотите регулярно уступать управление главному потоку, чтобы позволить происходить взаимодействию пользователя, чтобы приложение оставалось отзывчивым и эффективным. isInputPending() позволяет уступать управление только тогда, когда есть ожидающие события ввода, а не делать это с произвольными интервалами.

isInputPending() вызывается с помощью navigator.scheduling.isInputPending().

options Необязательный

Объект, предоставляющий параметры. В настоящее время единственный параметр:

includeContinuous Необязательный

Булево значение, которое false по умолчанию. Если установлено в true, это указывает на то, что при проверке наличия ожидающего ввода следует учитывать непрерывные события. Непрерывные события — это доверенные события (события, отправленные браузером), которые последовательно срабатывают, например, mousemove, wheel, touchmove, drag, pointermove и pointerrawupdate.

Булево значение, указывающее, есть ли ожидающие события ввода в очереди событий (true) или нет (false).

Мы можем использовать isInputPending() внутри структуры обработчика задач для выполнения функции yield() только тогда, когда пользователь пытается взаимодействовать со страницей:

function yield() {
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

async function main() {
  // Create an array of functions to run
  const tasks = [a, b, c, d, e];

  while (tasks.length > 0) {
    // Yield to a pending user input
    if (navigator.scheduling.isInputPending()) {
      await yield();
    } else {
      // Shift the first task off the tasks array
      const task = tasks.shift();

      // Run the task
      task();
    }
  }
}

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

• Scheduler интерфейс
• API планирования задач с приоритетами
• Быстрее события ввода с первым вкладом Facebook в браузер API на engineering.fb.com (2019)
• Лучшее планирование JS с isInputPending() на developer.chrome.com (2020)
• Оптимизация длительных задач на web.dev (2022)