#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. хорошо, спасибо. Я приму это, как только смогу.