Блог

Я пытаюсь замедлить анимацию изображения, уменьшающегося, чтобы вы действительно могли видеть, как оно уменьшается, вместо того, чтобы просто переходить к меньшему размеру, но вместо этого происходит то, что мой журнал консоли обновляется должным образом-с интервалами между каждым обновлением, но изображение на экране ждет, пока цикл for завершится, а затем переходит к конечному размеру вместо того, чтобы постепенно уменьшаться. Есть ли что-то не так с моим кодом или мне не хватает некоторых закулисных сведений о том, как обновляется страница?

 function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
      currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}

function makeSmaller(){
    for (let i = 100; i>50; i--){
    rockButtonImage.style.width = i '%';
    console.log(rockButtonImage.style.width);
    sleep(50);
    }
}
 

Современные браузеры избегают ненужного отображения страницы и ждут завершения итерации выполнения JavaScript, прежде чем выполнять отображение.

sleep() Функция в предоставленном коде на самом деле не заставляет браузер sleep , а скорее выполняет вычисления с интенсивным использованием процессора, запрещая браузеру что-либо отображать.

Вместо этого вы можете попробовать использовать setTimeout() функцию, например:

 var i = 100;
function makeSmaller(){
    console.log(rockButtonImage.style.width);
    rockButtonImage.style.width = i '%';
    i--;
    if (i > 50) {
        setTimeout(makeSmaller, 50);
    }
}
 

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

Смотрите также:

• Подробнее о setTimeout : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
• Подробнее об анимации CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Вы должны динамически получить элемент DOM getElementById, а затем изменить ширину. Я не уверен, в каком контексте живет переменная RockButton. Все дело в государстве.