老师上课讲的轮播图案例有时候左按钮失效问题

首页课程实战体系课手记专栏慕课教程

来源：6-3 编写跑马灯轮播图特效

redTSH

2020-11-21 22:21:57

# 具体遇到的问题
根据老师上课讲的案例写的轮播图代码，在做测试的时候发现：

有的时候当在第0张图时，按左按钮却表现出按0.5s从左往右去到第4张图的动画，这种情况发生的频率不高，大概10次会触发一次，感觉像左按钮的0秒延时器偶尔失效的样子，请问这个问题要怎么解决？

另外我下载了老师的源代码测试，也是发现这种偶尔失效的表现。
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .box ul {
            position: relative;
            width: 5000px;
            list-style: none;
            left: 0;
            /* transition: left .5s ease 0s; */
        }

        .box ul li {
            float: left;
        }

        #leftbtn {
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: pink;
        }

        #rightbtn {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="box" class="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>
        </ul>
        <a href="javascript:;" id="leftbtn"></a>
        <a href="javascript:;" id="rightbtn"></a>
    </div>

    <script>
        var oBox = document.getElementById('box');
        var oList = document.getElementById('list');
        var leftBtn = document.getElementById('leftbtn');
        var rightBtn = document.getElementById('rightbtn');

        // 将第0张图片复制一张
        // 要用firstElementChild 否则得到空文本节点
        var new_li = oList.firstElementChild.cloneNode(true);
        // 上树
        oList.appendChild(new_li);

        // 定义图片标号
        var pic_pos = 0;

        // 定义节流锁标记
        var lock = true;

        // 右按钮点击事件
        rightBtn.onclick = function () {
            // 判断锁的状态，上了锁直接跳过
            if (!lock) return;

            // 上锁，开始动画
            lock = false;
            // 添加动画，防止最后一张时清除了
            oList.style.transition = 'left .5s ease 0s';
            // 图片标号+1，改变left值
            pic_pos += 1;
            oList.style.left = pic_pos * -650 + 'px';
            // 判断是否为最后一张
            if (pic_pos == 5) {
                // 延时器为了让过渡动画跑完
                setTimeout(function () {
                    // 取消过渡属性以达到瞬间切换效果
                    oList.style.transition = 'none';
                    pic_pos = 0;
                    oList.style.left = pic_pos * -650 + 'px';
                }, 500);
            };
            // 延时0，5s动画结束，解锁
            setTimeout(function () {
                lock = true;
            }, 500);
        }

        // 左按钮事件
        leftBtn.onclick = function () {
            // 节流锁
            if (!lock) return;
            // 上锁
            lock = false;
            oList.style.transition = 'none';
            // 判断是否为第0张图片
            if (pic_pos == 0) {
                // 先取消动画，瞬移到第0张的假身，即第5张
                oList.style.transition = 'none';
                // pic_pos = 5;
                oList.style.left = 5 * -650 + 'px';
                // 延时器为了产生异步，等瞬移结束了，按照动画要求过渡到第4张图片
                // 此时看起来就是从第0张缓慢移动到第4张
                setTimeout(function () {
                    oList.style.transition = 'left .5s ease 0s';
                    pic_pos = 4;
                    oList.style.left = pic_pos * -650 + 'px';
                }, 0);
            } else {
                oList.style.transition = 'left .5s ease 0s';
                pic_pos -= 1;
                oList.style.left = pic_pos * -650 + 'px';
            }
            // 动画结束解锁
            setTimeout(function () {
                lock = true;
            }, 500);
        };

    </script>
</body>

</html>