js setTimeout() завершается мгновенно, без каких-либо перерывов

#javascript

#язык JavaScript

Вопрос:

при написании кода я столкнулся с этой очень странной проблемой. Мой код приведен ниже: js

 document.getElementById("id").style.width = "0%" var a = 0; setTimeout(function () {  if (a lt;= 60) {  document.getElementById("id").style.width = a   "%";  a  ;  } }, 100);

Я хочу, чтобы он запускался 60 раз, каждый раз меняя ширину div на 1% Однако, когда я запускаю код, блок if завершает его мгновенно, как будто тайм-аут не сработал. Кто-нибудь может сказать мне, что случилось? Заранее спасибо!

1. Вы знаете , что 100 это 100ms так, и что это работает только один раз?

2. Похоже, вы анимируете свойства CSS элемента. Вы не должны использовать JS для этого (не говоря уже setTimeout о том, чтобы ). Вместо этого используйте @keyframes в CSS. Если вы должны использовать JS, то используйте requestAnimationFrame .

3. время, которое вы ввели, указано в миллисекундах. так что его 100 миллисекунд, если вы установите его равным 1000, это будет 1 секунда

4. @connexo, что ты конкретно имеешь в виду?

5. setTimeout запускает код только один раз, по истечении, по крайней мере, указанного времени. Используйте setInterval вместо этого.

Ответ №1:

setTimeout функция выполняется только один раз после указанного времени в миллисекундах.

Если вы хотите продолжать выполнять блок, вы должны использовать setInterval вместо setTimeout .

setInterval продолжает вызывать функцию с тех пор, как интервал очищен.

Не забудьте позвонить clearInterval , как только цель будет достигнута.

 var a = 0; const interval = setInterval(function () {  if (a lt;= 60) {  console.log("Im being called");  document.getElementById("id").style.width = a   "%";  a  ;  } else {  // Target achieved, clearing interval  console.log("Im stoping execution");  clearInterval(interval)  } }, 100);

 #id {  height: 300px;  background: orange; }

 lt;div id="id"gt;lt;/divgt;

1. должен ли интервал определяться как переменная?

2. @mm4096 Да, в противном случае вы не сможете его очистить, что означало бы, что он будет работать бесконечно. Тем не менее, для того, что вы делаете, Javascript определенно является неправильным инструментом. Вместо этого используйте CSS и @keyframes анимацию.

3. @mm4096. ДА. Вы должны очистить его, как только ваше требование будет выполнено. Для того, чтобы он хранился в какой-то ячейке памяти.

4. хорошо, спасибо. Я приму это, как только смогу.