Вернуться к уроку

Для подсветки setInterval или setTimeout?

важность: 5

Нужно выбрать вариант 2, который гарантирует браузеру свободное время между выполнениями highlight.

Первый вариант может загрузить процессор на 100%, если highlight занимает время, близкое к 10 мс или, тем более, большее чем 10 мс, т.к. таймер не учитывает время выполнения функции.

Что интересно, в обоих случаях браузер не будет выводить предупреждение о том, что скрипт занимает много времени. Но от 100% загрузки процессора возможны притормаживания других операций. В общем, это совсем не то, что мы хотим, поэтому вариант 2.

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

Поэтому решаем обрабатывать не весь код сразу, что привело бы к зависанию скрипта, а разбить работу на части: подсвечивать по 20 строк раз в 10 мс.

Как мы знаем, есть два варианта реализации такой подсветки:

  1. Через setInterval, с остановкой по окончании работы:

    timer = setInterval(function() {
      if (есть еще что подсветить) highlight();
      else clearInterval(timer);
    }, 10);
  2. Через рекурсивный setTimeout:

    setTimeout(function go() {
      highlight();
      if (есть еще что подсветить) setTimeout(go, 10);
    }, 10);

Какой из них стоит использовать? Почему?