javascript - javascript 如何更新 DOM 中的元素？

Question

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

标签： javascriptcssdom

Answer 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