老师我这段代码有什么问题吗？为什么节流操作实现不了啊

来源：6-1 JS和CSS3结合实现动画

KangarooL

2021-04-14 20:52:25

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            // 得到元素
            var oBtn = document.getElementById('btn');
            var oBox = document.getElementById('box');

            // 标识量，指示当前盒子在左边还是右边
            var pos = 1;    // 1左边，2右边
            // 函数节流锁
            var lock = true;

            // 事件监听
            oBtn.onclick = function () {
                // 首先检查锁是否是关闭的
                if (!lock) return;

                // 加上过渡
                oBox.style.transition = 'all 2s linear 0s';
                if (pos == 1) {
                    // 瞬间移动
                    oBox.style.left = "1100px";
                    pos = 2;
                } else if (pos == 2) {
                    oBox.style.left = "100px";
                    pos = 1;
                }

                // 关锁
                lock = false;

                setTimeout(function () {
                    lock = true;
                }, 2000);
            };
        }
    </script>
</head>

<body>
    <button id="btn">按我运动</button>
    <div id="box"></div>
</body>

</html>