javascript 如何更新 DOM 中的元素？答案

【问题标题】：How does javascript update the elements in a DOM?javascript 如何更新 DOM 中的元素？
【发布时间】：2021-08-14 03:53:33
【问题描述】：

我正在尝试减慢图片缩小的动画速度，以便您可以实际看到它缩小而不是仅仅跳到更小的尺寸，但相反的结果是我的控制台日志按应有的时间更新 - 间隔在 -在每次更新之间，但屏幕上的图像会等到 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 css dom

【解决方案1】：

现代浏览器避免不必要的页面渲染，并在执行渲染之前等待 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

【讨论】：

【解决方案2】：

您必须动态获取 DOM 元素 getElementById 然后更改宽度。我不确定 RockButton 变量存在于哪个上下文中。一切都与国家有关。

【讨论】：