Как реализовать увеличение числа на 1 раз в секунду (таймер)?

Question

[Павел Антонов]

Ребят простая задача оказалась достаточно сложной для меня))) попробовал вот так

i = 0
do {
   setTimeout(function() {
   	   i += 1;
   	   $(".count1").text(i);
   }, 1000);
} while (i <= 100)

у меня вешается браузер :)
в общем нужно раз в секунду делать i++ и отображать это в нужном div'е))

Answer 1

[Алексей Уколов]

Чтобы не путаться в замыканиях, областях видимости переменных и бесконечных циклах, проще всего сделать так:

setInterval(() => $(".count1").text(parseInt($(".count1").text(), 10) + 1), 1000);

Но этот способ предполагает, что в .count1 изначально будет какое-то число.

Если чуть усложнить код, то это ограничение снимается:

setInterval(() => $(".count1").text((parseInt($(".count1").text(), 10) || 0) + 1), 1000);

или

let counter = 1;
setInterval(() => $(".count1").text(counter++), 1000);

Comments

[Павел Антонов]

спасибо setInterval(() => $(".count1").text((parseInt($(".count1").text(), 10) || 0) + 1), 1000); работает, скажите а как ограничить этот инетрвал ну например 100 итераций, а то число идет бесконечно)

и для понимания что значит () =>

остальное вроде понятно

Answer 2

[Петр]

Если вы хотите более точного увеличение числа на 1 в секунду, то нужно привязываться к классу Date.
Функция setTimeout очень не точна и набегает большая погрешность.