javascript 如何更新 DOM 中的元素？

Question

我正在嘗試放慢圖片縮小的 animation 的速度，以便您實際上可以看到它縮小而不是僅僅跳到更小的尺寸，但實際發生的是我的控制台日志按預期更新 - 每次更新之間的間隔，但屏幕上的圖像會等到 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);
    }
}

Answer 1

現代瀏覽器避免不必要的頁面呈現，並等待 JavaScript 執行迭代完成后再進行呈現。

所提供代碼中的sleep() function 並不會真正導致瀏覽器進入sleep ，而是進行處理器密集型計算，禁止瀏覽器呈現任何內容。

您可以嘗試使用setTimeout() function 代替，例如：

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

Answer 2

您必須動態獲取 DOM 元素 getElementById，然后更改寬度。 我不確定 RockButton 變量存在於哪個上下文中。 一切都與 state 有關。