Что хуже, бесконечные таймеры или промисы?

133
01 мая 2021, 11:40

Вопрос по работе движка! Что хуже? Бесконечные таймеры или промисы? И почему? Такой вопрос задали на собеседовании. Кто может пояснить?

Answer 1

Если говорить про бесконечность, то ответ - хуже Promise.

Особенность микротасок в том, что они выполняются в первую очередь после окончания текущей таски, пока не очистится собственная очередь микротасок. Таким образом, если микротаска создает микротаску и так до бесконечности, то это полностью заблокирует event loop.

В свою очередь бесконечный нулевой таймер (интервал, скорее) создает таску в конец текущей очереди. Если очередь пуста, то код в таймере выполнится сразу. Если очередь имеет задания, то выполнятся сначала они, а потом ваш timer-callback.

const int0 = setInterval(() => console.log('interval 0'))
const int10 = setInterval(() => console.log('interval 10'))
setTimeout(() => {
  clearInterval(int0);
  clearInterval(int10);
  console.log('Если бы код был заблокирован интервалами, мы бы не смогли вызвать эту функцию');
}, 200);

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

function infinitePromise() {
    return new Promise(res => {
        console.log('Бесконечный промис');
        res();
    }).then(() => infinitePromise());
}
setTimeout(() => console.log('Этот код никогда не выполнится'), 200);
infinitePromise();

В этом случае очередь микротасок никогда не очистится и setTimeout не сможет поставить задание в очередь.

Термины, типа хуже/лучше немного странные в этом случае. Но если конкретно про возможность браузерного движка дышать между выполнением вашего кода, то setInterval - больше похоже на нормальное сердцебиение. Promise - это смерть от таскоизлияния.

READ ALSO
Слайдер с изображениями вместо точек навигации

Слайдер с изображениями вместо точек навигации

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

102
Позиционирование блока в меню шапки

Позиционирование блока в меню шапки

пытаюсь переместить второе меню в правую часть экрана, но не выходитЯ плохо разбираюсь в позиционирование элементов, не могли бы вы подсказать...

122
Как анимировать радиальный градиент с помощью CSS?

Как анимировать радиальный градиент с помощью CSS?

Я пытаюсь создать эффект анимации блеска с радиальным градиентом для блока div, но я не уверен, что мой способ, - лучший способ сделать это

122
Создание копий при возвращении из функции

Создание копий при возвращении из функции

Всё глубже и глубже погружаясь в C++, я начинаю немного сходить с ума, виной этому то, что некоторые вещи я просто не могу объяснить, а заучивать...

125