Задачи

Задача 1

Напишите функцию, которая последовательно выводит в консоль числа от 1 до 20, с интервалом между числами 100мс. То есть, весь вывод должен занимать 2000мс, в течение которых каждые 100мс в консоли появляется очередное число.

Решение задачи должно использовать setInterval.

Решение

function printNumbersInterval20_100() {
  var i = 1;
  var timerId = setInterval(function() {
    console.log(i);
    if (i == 20) clearInterval(timerId);
    i++;
  }, 100);
}

// вызов
printNumbersInterval20_100();

Свой вариант:

'use strict';
function printNumbers(firstNumber, lastNumber, interval){
    var timerId = setInterval(function(){
        console.log(firstNumber);
        if(firstNumber === lastNumber) {
            clearInterval(timerId);
        }
        firstNumber += 1;
    }, interval);

}

printNumbers(1, 20, 100);

Задача 2

Сделайте то же самое, что в задаче 1, но с использованием setTimeout вместо setInterval.

Решение

function printNumbersTimeout20_100() {
  var i = 1;
  var timerId = setTimeout(function go() {
    console.log(i);
    if (i < 20) setTimeout(go, 100);
    i++;
  }, 100);
}

// вызов
printNumbersTimeout20_100();

Свой вариант:

function printNumbers2(firstNumber, lastNumber, interval){
    var timer = setTimeout(function go(){
        console.log(firstNumber);
        if(firstNumber !== lastNumber) {
            setTimeout(go, interval);
            firstNumber += 1;
        }
    }, interval);
}

printNumbers2(1, 20, 100);

Задача 3

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

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

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

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

timer = setInterval(function() {
  if (есть еще что подсветить) highlight();
  else clearInterval(timer);
}, 10);

Через вложенные setTimeout:

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

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

Решение

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

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

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