JS动画中id为demo2的元素值为何始终为0？同步问题解析

问题原因 #

你给demo2赋值的代码document.getElementById("demo2").innerHTML = pos;只在myMove函数执行初期跑了一次——也就是点击按钮触发myMove时，此时pos的初始值是0。之后pos在frame函数里随着定时器不断递增，但demo2再也没有被重新赋值，所以它会一直停留在初始的0，不会跟着变化。

而demo的赋值逻辑是放在frame函数内部的，这个函数会被setInterval每隔5毫秒调用一次，每次都会把最新的pos值同步给demo，所以它能实时更新数值。

解决方法 #

把demo2的赋值代码移到frame函数里，和demo的赋值放在一起，这样每次定时器触发frame时，两个元素都会被更新为当前最新的pos值。

修改后的完整代码：

<!DOCTYPE html>
<html>
<style>
    #container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
    }

    #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;
    }
</style>

<body>
<p><button onclick="myMove()">Click Me</button></p>

<div id="container">
    <div id="animate"></div>
</div>

<p id="demo"></p>
<p id="demo2"></p>

<script>
    function myMove() {
        let id = null;
        const elem = document.getElementById("animate");
        let pos = 0;
        clearInterval(id);
        id = setInterval(frame, 5);
        function frame() {
            if (pos == 350) {
                clearInterval(id);
            } else {
                pos++;
                elem.style.top = pos + "px";
                elem.style.left = pos + "px";
            }
            document.getElementById("demo").innerHTML = pos;
            // 把demo2的赋值移到这里
            document.getElementById("demo2").innerHTML = pos;
        }
    }
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user17767013