Как написать таймер на javascript
Перейти к содержимому

Как написать таймер на javascript

  • автор:

Основы работы с функцией setInterval в JavaScript

В данном уроке мы научимся работать с таймерами в JavaScript. Разобравшись с таймерами, вы сможете автоматически выполнять на странице какие-либо операции через заданный промежуток времени. К примеру, можно будет сделать слайдер картинок, в котором картинки будут меняться каждую секунду.

Для работы с таймерами в JavaScript используется функция setInterval , которая запускает заданный код через определенные промежутки времени.

Эта функция работает следующим образом: первым параметром она принимает исходный код функции, а вторым параметром — интервал, через который эта функция будет автоматически вызываться. Второй параметр задается в миллисекундах (1000 миллисекунд = 1 секунда).

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

Для начала сделаем функцию, выводящую что-нибудь в консоль:

function timer() < console.log('!'); >

А теперь с помощью setInterval заставим созданную нами функцию выполнятся каждую секунду:

setInterval(timer, 1000); function timer() < console.log('!'); >

Не обязательно создавать отдельную функцию — можно просто в первый параметр setInterval передать анонимную функцию, вот так:

setInterval(function() < console.log('!'); >, 1000);

Запустите таймер, который каждые 3 секунды будет что-нибудь выводить в консоль.

Как создать таймер на сайт с помощью HTML, CSS и JavaScript

В статье рассказывается, как создать таймер на сайт, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:

Основные функции таймера:

  • Отображение оставшегося времени.
  • Преобразование времени в формат MM:SS.
  • Изменение цвета, когда оставшееся время приближается к нулю.
  • Отображение оставшегося времени в виде анимированного кольца.

Шаг 1. Начните с базовой разметки и стилей

Мы добавим svg с элементом circle внутри, чтобы нарисовать кольцо таймера. А также добавим интервал, чтобы показать оставшееся значение времени. Для этого мы вставляем JavaScript в HTML и включаем в DOM, указывая элемент #app.

document.getElementById("app").innerHTML = `      `;

Далее используем CSS, чтобы:

  • Установить размер таймера обратного отсчета.
  • Удалить заливку и обводку из элемента круга.
  • Установить ширину и цвет кольца.

/* Устанавливаем высоту и ширину контейнера */ .base-timer < position: relative; height: 300px; width: 300px; >/* Удаляем стили SVG, которые могли бы скрыть временную метку */ .base-timer__circle < fill: none; stroke: none; >/* Контур SVG, который отображает прогресс времени */ .base-timer__path-elapsed

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

Шаг 1. Начните с базовой разметки и стилей

Шаг 2. Настройка временной метки

HTML-код содержит пустой элемент для отображения оставшегося время. Мы добавим сюда соответствующее значение в формате MM:SS с помощью метода formatTimeLeft.

function formatTimeLeft(time) < // Наибольшее целое число меньше или равно результату деления времени на 60. const minutes = Math.floor(time / 60); // Секунды – это остаток деления времени на 60 (оператор модуля) let seconds = time % 60; // Если значение секунд меньше 10, тогда отображаем его с 0 впереди if (seconds < 10) < seconds = `0$`; > // Вывод в формате MM:SS return `$:$`; >

После этого мы используем только что созданный метод в шаблоне.

document.getElementById("app").innerHTML = ` 
$
`

Чтобы вывести значение внутри кольца, нужно обновить стили.

// Начинаем с исходного значения в 20 секунд const TIME_LIMIT = 20; // Изначально осталось полное время интервала, но оно будет отсчитываться // и вычитаться из TIME_LIMIT let timePassed = 0; let timeLeft = TIME_LIMIT;

Шаг 2. Настройка временной метки

Теперь заставим таймер отсчитывать от 20 до 0.

Шаг 3: Обратный отсчет

У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.

Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:

  • Устанавливать интервал счетчика.
  • Увеличивать значение timePassed каждую секунду.
  • Пересчитывать значение timeLeft.
  • Обновлять значение метки в шаблоне.

Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.

let timerInterval = null; document.getElementById("app").innerHTML = `. ` function startTimer() < timerInterval = setInterval(() =>< // Количество времени, которое прошло, увеличивается на 1 timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; // Обновляем метку оставшегося времени document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft); >, 1000); >

У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.

document.getElementById("app").innerHTML = `. ` startTimer();

Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.

Шаг 4: Перекрываем кольцо таймера другим кольцом

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

Сначала добавим элемент path в SVG.

document.getElementById("app").innerHTML = ` 
$
`;

После этого добавим несколько стилей, чтобы круговая траектория выглядела как оригинальное серое кольцо. Важно, чтобы свойство stroke-width принимало значение, равное размеру исходного кольца. А также чтобы длительность transition была ​​установлена ​​на 1 секунду.

.base-timer__path-remaining < /* Такая же ширина, что и у исходного кольца */ stroke-width: 7px; /* Замыкаем концы линии, чтобы создать круг */ stroke-linecap: round; /* Делаем так, чтобы анимация начиналась вверху */ transform: rotate(90deg); transform-origin: center; /* Одна секунда подгоняется под таймер обратного отсчета */ transition: 1s linear all; /* Задаем смену цвета кольца, когда обновляется значение цвета */ stroke: currentColor; >.base-timer__svg < /* Переворачиваем кольцо и задаем движение анимации слева направо */ transform: scaleX(-1); >

Но кольцо таймера пока не анимируется.

Шаг 4: Перекрываем кольцо таймера другим кольцом

Для анимации линии оставшегося времени мы будем использовать свойство stroke-dasharray.

Шаг 5. Анимация кольца прогресса

Посмотрим, как будет выглядеть кольцо с различными значениями stroke-dasharray.

Шаг 5. Анимация кольца прогресса

Свойство stroke-dasharray делит оставшееся кольцо времени на отрезки равной длины. Это происходит, когда мы задаем stroke-dasharray число от 0 до 9.

Посмотрим, как это свойство будет себя вести, если передать ему два значения: 10 и 30.

Шаг 5. Анимация кольца прогресса - 2

stroke-dasharray: 10 30

Это устанавливает длину первой секции (оставшегося времени) на 10, а второй секции (прошедшего времени) – на 30. Мы можем использовать это в нашем таймере обратного отсчета.

Нужно, чтобы кольцо покрыло всю окружность. То есть, оставшееся время равно длине окружности кольца.

Вычислить длину дуги можно по следующей формуле:

Length = 2πr = 2 * π * 45 = 282,6

Это значение используется при первоначальном наложении кольца.

stroke-dasharray: 283 283

Первое значение в массиве – это оставшееся время, а второе – прошедшее. Теперь нам нужно манипулировать первым значением. Вот что произойдет, когда изменяется первое значение.

Создадим метод для подсчета оставшейся доли начального времени. Еще один – для вычисления значения stroke-dasharray и обновление элемента , представляющего оставшееся время.

// Делим оставшееся время на определенный временной лимит function calculateTimeFraction() < return timeLeft / TIME_LIMIT; >// Обновляем значение свойства dasharray, начиная с 283 function setCircleDasharray() < const circleDasharray = `$<( calculateTimeFraction() * FULL_DASH_ARRAY ).toFixed(0)>283`; document .getElementById("base-timer-path-remaining") .setAttribute("stroke-dasharray", circleDasharray); >

Также необходимо обновлять контур каждую секунду. Для этого вызовем метод setCircleDasharray внутри timerInterval.

function startTimer() < timerInterval = setInterval(() =>< timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft); setCircleDasharray(); >, 1000); >

Но анимация отстает на 1 секунду. Когда мы достигаем 0, все еще виден кусочек кольца.

Эту проблему можно решить, постепенно уменьшая длину кольца во время обратного отсчета в методе calculateTimeFraction.

function calculateTimeFraction() < const rawTimeFraction = timeLeft / TIME_LIMIT; return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction); >

Шаг 6: Изменение цвета в определенные моменты времени

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

// Оповещение на 10 секунде const WARNING_THRESHOLD = 10; // Предупреждение на 5 секунде const ALERT_THRESHOLD = 5; const COLOR_CODES = < info: < color: "green" >, warning: < color: "orange", threshold: WARNING_THRESHOLD >, alert: < color: "red", threshold: ALERT_THRESHOLD >>;

Теперь создадим метод, который будет отвечать за проверку превышения установленного порога и изменение цвета.

function setRemainingPathColor(timeLeft) < const < alert, warning, info >= COLOR_CODES; // Если оставшееся время меньше или равно 5, удаляем класс "warning" и применяем класс "alert". if (timeLeft else if (timeLeft >

Мы удаляем один класс CSS, когда таймер обратного отсчета достигает определенной точки, и добавляем вместо него другой. Объявим эти классы.

.base-timer__path-remaining.green < color: rgb(65, 184, 131); >.base-timer__path-remaining.orange < color: orange; >.base-timer__path-remaining.red

Все готово. Ниже приводится полная демо-версия:

Таймер обратного отсчета в 18 строк кода JavaScript.

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на JavaScript в 18 строк кода.

План

  • Установить правильную дату окончания
  • Высчитать оставшееся время
  • Привести дату к удобному формату
  • Вывести данные таймера, как многоразовый объект
  • Отобразить часы на странице и остановить их, когда они достигнут нуля

Устанавливаем правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

var deadline = '2015-12-31';
var deadline = '31/12/2015';

Или длинный формат

var deadline = 'December 31 2015';

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

var deadline = 'December 31 2015 23:59:59 GMT+02:00';

Высчитываем оставшееся время

Следующий шаг — высчитать оставшееся время. Чтобы это сделать, нам нужно написать функцию, которая будет брать строку с временем окончания и считать разницу между этим временем и текущим. Вот как это выглядит:

function getTimeRemaining(endtime) var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor( (t/1000) % 60 ); var minutes = Math.floor( (t/1000/60) % 60 ); var hours = Math.floor( (t/(1000*60*60)) % 24 ); var days = Math.floor( t/(1000*60*60*24) ); return  'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds >; >

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в JavaScript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

var t = Date.parse(endtime) - Date.parse(new Date());

Приводим дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

var seconds = Math.floor( (t/1000) % 60 );

Разберемся, что здесь происходит.

  • Делим миллисекунды на 1000, чтобы перевести их в секунды
  • Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
  • Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выводим данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

return  'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds >;

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

getTimeRemaining(deadline).minutes

Отображаем часы на странице и останавливаем их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

div id pl-s">clockdiv">div>

Затем напишите функцию, которая будет отображать данные внутри нашего div’а:

function initializeClock(id, endtime) var clock = document.getElementById(id); var timeinterval = setInterval(function() var t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + ' ' + 'hours: '+ t.hours + ' ' + 'minutes: ' + t.minutes + ' ' + 'seconds: ' + t.seconds; if(t.total0) clearInterval(timeinterval); > >,1000); >

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

Дальше мы будем использовать setInterval , чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:

  • Высчитывать оставшееся время
  • Выводить оставшееся время в наш div
  • Если оставшееся время = 0 , останавливать часы

Единственное, что осталось, запустить часы следующим образом:

initializeClock('clockdiv', deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк JavaScript кода.

Подготавливаем наши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

  • Убрать начальную задержку, чтобы таймер показывался незамедлительно
  • Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
  • Добавить нули по желанию

Убираем начальную задержку

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.

В вашем JavaScript замените это:

var timeinterval = setInterval(function() . >,1000);
function updateClock() var t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + ' ' + 'hours: '+ t.hours + ' ' + 'minutes: ' + t.minutes + ' ' + 'seconds: ' + t.seconds; if(t.total0) clearInterval(timeinterval); > > updateClock(); // запустите функцию один раз, чтобы избежать задержки var timeinterval = setInterval(updateClock,1000);

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Вот html:

div id pl-s">clockdiv"> Days: span class pl-s">days">span>br> Hours: span class pl-s">hours">span>br> Minutes: span class pl-s">minutes">span>br> Seconds: span class pl-s">seconds">span> div>

Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной clock .

var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds');

Дальше нам нужно изменить функцию updateClock , чтобы обновить только числа, а не все часы. Новый код будет выглядеть так:

function updateClock() var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = t.hours; minutesSpan.innerHTML = t.minutes; secondsSpan.innerHTML = t.seconds; . >

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

secondsSpan.innerHTML = t.seconds;
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на JavaScript. Все, что вам осталось, это добавить стили.

Таймеры JavaScript: все что нужно знать

Здравствуйте, коллеги. Давным-давно на Хабре уже переводилась статья под авторством Джона Резига как раз на эту тему. Прошло уж 10 лет, а тема по-прежнему требует разъяснений. Поэтому предлагаем интересующимся почитать статью Самера Буны, в которой дается не только теоретический обзор таймеров в JavaScript (в контексте Node.js), но и задачи на них.

Несколько недель назад я опубликовал в Твиттере следующий вопрос с одного собеседования:

«Где находится исходный код функций setTimeout и setInterval? Где бы вы его искали? Погуглить нельзя :)»

***Ответьте на него для себя, а потом читайте дальше ***

Примерно половина ответов на этот твит были неверными. Нет, дело НЕ СВЯЗАНО с V8 (или другими VM). Функции вроде setTimeout и setInterval , гордо именуемые «Таймерами JavaScript», не входят ни в одну спецификацию ECMAScript или в реализацию движка JavaScript. Функции-таймеры реализуются на уровне браузера, поэтому в разных браузерах их реализации отличаются. Также таймеры нативно реализуются в самой среде исполнения Node.js.

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

В Node таймеры входят в состав объекта global , который устроен подобно браузерному интерфейсу Window . Исходный код таймеров в Node показан здесь.

Кому-то может показаться, что это просто плохой вопрос с собеседования – какой вообще прок знать подобное?! Я, как JavaScript-разработчик, думаю так: предполагается, что вы должны это знать, поскольку обратное может свидетельствовать, что вы не вполне понимаете, как V8 (и другие виртуальные машины) взаимодействует с браузерами и Node.

Рассмотрим несколько примеров и решим парочку задач на таймеры, давайте?

Для запуска примеров из этой статьи можно воспользоваться командой node. Большинство рассмотренных здесь примеров фигурируют в моем курсе Getting Started with Node.js на Pluralsight.

Отложенное выполнение функции

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

Вот пример отложенного выполнения:

// example1.js setTimeout( () => < console.log('Hello after 4 seconds'); >, 4 * 1000 );

В этом примере при помощи setTimeout вывод приветственного сообщения откладывается на 4 секунды. Второй аргумент setTimeout — это задержка (в мс). Я умножаю 4 на 1000, чтобы получилось 4 секунды.

Первый аргумент setTimeout – функция, выполнение которой будет откладываться.
Если выполнить файл example1.js командой node, Node приостановится на 4 секунды, а затем выведет приветственное сообщение (после чего последует выход).

Обратите внимание: первый аргумент setTimeout — это всего лишь ссылка на функцию. Она не должна быть встроенной функцией – такой, как example1.js . Вот тот же самый пример без использования встроенной функции:

const func = () => < console.log('Hello after 4 seconds'); >; setTimeout(func, 4 * 1000);

Передача аргументов

Если функция, для задержки которой используется setTimeout , принимает какие-либо аргументы, то можно использовать оставшиеся аргументы самой функции setTimeout (после тех 2, которые мы уже успели изучить) для переброски значений аргументов к отложенной функции.

// Для: func(arg1, arg2, arg3, . ) // Можно использовать: setTimeout(func, delay, arg1, arg2, arg3, . )
// example2.js const rocks = who => < console.log(who + ' rocks'); >; setTimeout(rocks, 2 * 1000, 'Node.js');

Вышеприведенная функция rocks , отложенная на 2 секунды, принимает аргумент who , и вызов setTimeout передает ей значение “Node.js” в качестве такого аргумента who .

При выполнении example2.js командой node фраза “Node.js rocks” будет выведена на экран через 2 секунды.

Задача на таймеры #1

Итак, опираясь на уже изученный материал о setTimeout , выведем 2 следующих сообщения после соответствующих задержек.

  • Сообщение “Hello after 4 seconds” выводим через 4 секунды.
  • Сообщение “Hello after 8 seconds” выводим через 8 секунд.

В вашем решении можно определить всего одну функцию, содержащую встроенные функции. Это означает, что множество вызовов setTimeout должны будут использовать одну и ту же функцию.

Вот как я бы решил эту задачу:

// solution1.js const theOneFunc = delay => < console.log('Hello after ' + delay + ' seconds'); >; setTimeout(theOneFunc, 4 * 1000, 4); setTimeout(theOneFunc, 8 * 1000, 8);

У меня theOneFunc получает аргумент delay и использует значение данного аргумента delay в сообщении, выводимом на экран. Таким образом, функция может выводить разные сообщения в зависимости от того, какое значение задержки мы ей сообщим.

Затем я использовал theOneFunc в двух вызовах setTimeout , причем, первый вызов срабатывает через 4 секунды, а второй – через 8 секунд. Оба эти вызова setTimeout также получают 3-й аргумент, представляющий аргумент delay для theOneFunc .

Выполнив файл solution1.js командой node, мы выведем на экран требования задачи, причем, первое сообщение появится через 4 секунды, а второе — через 8 секунд.

Повторяем выполнение функции

А что, если бы я задал вам выводить сообщение каждые 4 секунды, неограниченно долго?
Конечно, можно заключить setTimeout в цикл, но в API таймеров также предлагается функция setInterval , при помощи которой можно запрограммировать «вечное» выполнение какой-либо операции.

Вот пример setInterval :

// example3.js setInterval( () => console.log('Hello every 3 seconds'), 3000 );

Этот код будет выводить сообщение каждые 3 секунды. Если выполнить example3.js командой node , то Node будет выводить эту команду до тех пор, пока вы принудительно не завершите процесс (CTRL+C).

Отмена таймеров

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

Вызов setTimeout возвращает ID таймера, и можно использовать этот ID таймера при вызове clearTimeout , чтобы отменить таймер. Вот пример:

// example4.js const timerId = setTimeout( () => console.log('You will not see this one!'), 0 ); clearTimeout(timerId);

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

При выполнении example4.js командой node , Node ничего не напечатает — процесс просто сразу же завершится.

Кстати, в Node.js предусмотрен и другой способ задать setTimeout со значением 0 мс. В API таймеров Node.js есть еще одна функция под названием setImmediate , и она в принципе делает то же самое, что и setTimeout со значением 0 мс, но в данном случае задержку можно не указывать:

setImmediate( () => console.log('I am equivalent to setTimeout with 0 ms'), ); 

Функция setImmediate поддерживается не во всех браузерах. Не используйте ее в клиентском коде.

Наряду с clearTimeout есть функция clearInterval , которая делает то же самое, но с вызовами setInerval , а также есть вызов clearImmediate .

Задержка таймера – вещь не гарантированная

Вы заметили, что в предыдущем примере при выполнении операции с setTimeout после 0 мс эта операция происходит не сразу же (после setTimeout ), а только после того, как будет целиком выполнен весь код скрипта (в том числе, вызов clearTimeout )?

Позвольте мне пояснить этот момент на примере. Вот простой вызов setTimeout , который должен бы сработать через полсекунды — но этого не происходит:

// example5.js setTimeout( () => console.log('Hello after 0.5 seconds. MAYBE!'), 500, ); for (let i = 0; i < 1e10; i++) < // Синхронно блокируем операции >

Сразу после определения таймера в данном примере мы синхронно блокируем среду времени выполнения большим циклом for . Значение 1e10 равно 1 с 10 нулями, поэтому цикл длится 10 миллиардов процессорных тактов (в принципе, так имитируется перегруженный процессор). Node ничего не может сделать, пока этот цикл не завершится.

Разумеется, на практике так делать очень плохо, но данный пример помогает понять, что задержка setTimeout – это не гарантированное, а, скорее, минимальное значение. Величина 500 мс означает, что задержка продлится минимум 500 мс. На самом деле, скрипту потребуется гораздо больше времени для вывода приветственной строки на экран. Сначала ему придется дождаться, пока завершится блокирующий цикл.

Задача на таймеры #2

Напишите скрипт, который будет выводить сообщение “Hello World” раз в секунду, но всего 5 раз. После 5 итераций скрипт должен вывести сообщение “Done”, после чего процесс Node завершится.

Ограничение: при решении данной задачи нельзя вызывать setTimeout .

Подсказка: нужен счетчик.

Вот как я бы решил эту задачу:

let counter = 0; const intervalId = setInterval(() => < console.log('Hello World'); counter += 1; if (counter === 5) < console.log('Done'); clearInterval(intervalId); >>, 1000);

В качестве исходного значения counter я задал 0, а затем вызвал setInterval , берущий его id.

Отложенная функция будет выводить сообщение и всякий раз при этом увеличивать счетчик на единицу. Внутри отложенной функции у нас инструкция if, которая будет проверять, не прошло ли уже 5 итераций. По истечении 5 итераций программа выведет “Done” и очистит значение интервала, воспользовавшись захваченной константой intervalId . Задержка интервала — 1000 мс.

«Кто» именно вызывает отложенные функции?

При использовании ключевого слова JavaScript this внутри обычной функции, вот так например:

function whoCalledMe()

значение в ключевом слове this будет соответствовать вызывающей стороне. Если определить вышеупомянутую функцию внутри Node REPL, то вызывать ее будет объект global . Если определить функцию в консоли браузера, то вызывать ее будет объект window .

Давайте определим функцию как свойство объекта, чтобы стало немного понятнее:

const obj = < id: '42', whoCalledMe() < console.log('Caller is', this); >>; // Теперь ссылка на функцию такова: obj.whoCallMe

Теперь, когда при работе с функцией obj.whoCallMe мы будем напрямую использовать ссылку на нее, в качестве вызывающей стороны будет выступать объект obj (идентифицируемый по своему id ):

А теперь вопрос: кто будет вызывающей стороной, если передать ссылку на obj.whoCallMe вызову setTimetout ?

// Какой текст будет выведен в данном случае?? setTimeout(obj.whoCalledMe, 0);

Кто в данном случае вызывающий?

Ответ будет отличаться в зависимости от того, где выполняется функция таймера. В данном случае просто недопустима зависимость от того, кто — вызывающая сторона. Вы утратите контроль над вызывающей стороной, поскольку именно от реализации таймера будет зависеть, кто в данном случае вызывает вашу функцию. Если протестировать этот код в Node REPL, то вызывающей стороной окажется объект Timeout :

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

Задача на таймеры #3

Напишите скрипт, который будет непрерывно выводить сообщение “Hello World” с варьирующимися задержками. Начните с односекундной задержки, после чего на каждой итерации увеличивайте ее на секунду. На второй итерации задержка будет 2 секунды. На третьей — три, и так далее.

Включите задержку в выводимое сообщение. У вас должен получиться примерно такой вывод:

Hello World. 1
Hello World. 2
Hello World. 3
.

Ограничения: переменные можно определять только при помощи const. При помощи let или var — нельзя.

Поскольку длительность задержки в данной задаче – величина переменная, использовать setInterval здесь нельзя, но можно вручную настроить интервальное выполнение при помощи setTimeout внутри рекурсивного вызова. Первая выполненная функция с setTimeout будет создавать следующий таймер, и так далее.

Кроме того, поскольку нельзя использовать let / var , у нас не может быть счетчика для приращения задержки при каждом рекурсивном вызове; вместо этого можно воспользоваться аргументами рекурсивной функции, чтобы выполнять приращение во время рекурсивного вызова.

Вот как можно было бы решить эту задачу:

const greeting = delay => setTimeout(() => < console.log('Hello World. ' + delay); greeting(delay + 1); >, delay * 1000); greeting(1);

Задача на таймеры #4

Напишите скрипт, который будет выводить сообщение “Hello World” с такой же структурой задержек, как и в задаче #3, но на этот раз группами по 5 сообщений, а в группах будет основной интервал задержки. Для первой группы из 5 сообщений выбираем исходную задержку в 100 мс, для следующей – 200 мс, для третьей – 300 мс и так далее.

Вот как должен работать этот скрипт:

  • На отметке 100 мс скрипт впервые выводит “Hello World”, и делает так 5 раз с интервалом, нарастающим по 100 мс. Первое сообщение появится через 100 мс, второе через 200 мс и т.д.
  • После первых 5 сообщений скрипт должен увеличивать основную задержку уже на 200 мс. Таким образом, 6-е сообщение будет выведено через 500 мс + 200 мс (700 мс), 7-е — 900 мс, 8-е сообщение – через 1100 мс, и так далее.
  • После 10 сообщений скрипт должен увеличивать основной интервал задержки на 300 мс. 11-е сообщение должно быть выведено через 500 мс + 1000 мс + 300 мс (18000 мс). 12-е сообщение должно быть выведено через 2100 мс, и т.д.

Включите задержку в выводимое сообщение. У вас должен получиться примерно такой вывод (без комментариев):

Hello World. 100 // При 100 мс
Hello World. 100 // При 200 мс
Hello World. 100 // При 300 мс
Hello World. 100 // При 400 мс
Hello World. 100 // При 500 мс
Hello World. 200 // При 700 мс
Hello World. 200 // При 900 мс
Hello World. 200 // При 1100 мс
.

Ограничения: Можно использовать лишь вызовы setInterval (а не setTimeout ) и только ОДНУ инструкцию if .

Поскольку мы можем работать только с вызовами setInterval , здесь нам потребуется использовать рекурсию, а также увеличивать задержку следующего вызова setInterval . Кроме того, инструкция if понадобится нам, чтобы это стало происходить лишь после 5 вызовов этой рекурсивной функции.

Вот возможное решение:

let lastIntervalId, counter = 5; const greeting = delay => < if (counter === 5) < clearInterval(lastIntervalId); lastIntervalId = setInterval(() =>< console.log('Hello World. ', delay); greeting(delay + 100); >, delay); counter = 0; > counter += 1; >; greeting(100);

Спасибо всем, кто дочитал.

  • javascript
  • node.js
  • front-end
  • web-программирование
  • задачи для программистов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *