老师,对代码执行流程有点疑惑

来源：5-2 定时器和延时器（2）

__Promise

2021-06-07 14:59:30

<!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>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            vertical-align: middle;
        }

        #box {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 10px auto;
            position: relative;
            /* overflow: hidden; */
        }

        #box a {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: aquamarine;
            border-radius: 50%;
            top: 50%;
            margin-top: -25px;
        }

        #box a#lbtn {
            left: 10px;
        }

        #box a#rbtn {
            right: 10px;
        }

        #box #list {
            width: 5000px;
            left: 0;
            position: absolute;
        }

        #box #list li {
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id="list">
            <li><img src="images/beijing/0.jpg" alt=""></li>
            <li><img src="images/beijing/1.jpg" alt=""></li>
            <li><img src="images/beijing/2.jpg" alt=""></li>
            <li><img src="images/beijing/3.jpg" alt=""></li>
            <li><img src="images/beijing/4.jpg" alt=""></li>
            <li><img src="images/beijing/0.jpg" alt=""></li>
        </ul>
        <a href="Javascript:;" id="lbtn"></a>
        <a href="Javascript:;" id="rbtn"></a>
        <script>
            var oBox = document.getElementById('box');
            var oLbtn = document.getElementById('lbtn');
            var oRbtn = document.getElementById('rbtn');
            var oList = document.getElementById('list');
            var num = 0;
            var lock = true;
            var move;
            oList.style.transition = 'left .5s ease 0s';

            function timer() {

                move = setInterval(function () {
                    num++
                    if (num == 6) {
                        num = 0;
                        oList.style.transition = 'none';
                        setTimeout(function () {
                            num++
                            oList.style.left = -num * 650 + 'px';
                            oList.style.transition = 'left .5s ease 0s';
                        }, 0)
                    }
                    oList.style.left = -num * 650 + 'px'
                }, 1500);
            }

            timer()

            oBox.onmouseenter = function () {
                clearInterval(move)
            }

            oBox.onmouseleave = function () {
                timer()
            }

            oLbtn.onclick = function () {
                if (lock != true) return;
                lock = false;
                if (num == 0) {
                    num = 5
                    oList.style.transition = 'none';
                    setTimeout(function () {
                        num--
                        oList.style.left = -num * 650 + 'px';
                        oList.style.transition = 'left .5s ease 0s';
                    }, 0)
                } else {
                    num--
                }
                oList.style.left = -num * 650 + 'px';
                setTimeout(function () {
                    lock = true;
                }, 500)
            }

            oRbtn.onclick = function () {
                if (lock != true) return;
                lock = false;
                num++
                if (num == 6) {
                    num = 0;
                    oList.style.transition = 'left .5s ease 0s';
                    oList.style.left = -num * 650 + 'px';

                    // setTimeout(function () {
                    num++
                    oList.style.left = -num * 650 + 'px';
                    oList.style.transition = 'left .5s ease 0s';
                    // }, 0)
                }
                oList.style.left = -num * 650 + 'px';
                // oList.style.transition = 'left .5s ease 0s';
                // oList.style.left = -num * 650 + 'px';
                // if (num == 5) {
                //     setTimeout(function () {
                //         num = 0
                //         oList.style.left = -num * 650 + 'px';
                //         oList.style.transition = 'none'
                //     }, 500)
                // }
                setTimeout(function () {
                    lock = true;
                }, 500)
            }
        </script>
    </div>
</body>

</html>