如何理解onmouseover鼠标移入事件和onmouseout鼠标移出事件

Question

本来是要写一个轮播图的，需求有一点是鼠标移入轮播图停止，移出轮播图再执行，但是现在他这个移出的事件会在网页第一次打开的时候和下面的setInterval交叉执行，要达到需求需要刷新一次网页就正常了、且只需刷新一次，但是他如果重新打开这个网页就又会出现这个问题

这个轮播图写了几次都是欧克的，但是这个练习出现这个问题，我想要知道他这个移出的判定是发生在移入之后的吗，毕竟我网页刚打开他就是移出的状态，我觉得是这个影响了。因为我把它那个移出事件注掉后就正常了，但是他又不能实现移出后继续执行。

    <script>
        // 获取图片

        var item = document.querySelector('#item')
        var imgRun = document.querySelector('#item').getElementsByClassName('items')
        var dots = document.querySelector('#dot').getElementsByClassName('dots')
        var i = 0
        var left = document.querySelector('#left')
        var right = document.querySelector('#right')
        console.log(imgRun)
        // 事件：鼠标移入事件
        item.onmouseover = function () {
            clearInterval(td)
            left.style.display = 'block'
            right.style.display = 'block'
        }
        // 鼠标移出事件
        item.onmouseout = function () {
            td = setInterval(laal, 1000)
            left.style.display = 'none'
            right.style.display = 'none'
        }
        // 左右按钮点击事件
        left.onclick = function () {
            laal('left')
        }
        right.onclick = function () {
            laal('right')
        }
        // 小圆点切换
        for (p = 0; p < dots.length; p++) {
            dots[p].setAttribute('index', p)
            dots[p].style.cursor = 'pointer'
            dots[p].onclick = function () {
                for (p1 = 0; p1 < dots.length; p1++) {
                    dots[p1].style.backgroundColor = 'rgba(225, 216, 216, 0.7)'
                    imgRun[p1].style.zIndex = 0
                }
                this.style.backgroundColor = '#fff'
                imgRun[this.getAttribute('index')].style.zIndex = 1
            }
        }
        function laal(type) {

            if (type === 'left') {
                i--
                if (i < 0) {
                    i = imgRun.length - 1
                }
            } else {
                i++
                if (i >= imgRun.length) {
                    i = 0
                }
            }

            for (var a = 0; a < imgRun.length; a++) {
                imgRun[a].style.zIndex = 0;
                dots[a].style.backgroundColor = 'rgba(225, 216, 216, 0.7)';
            }

            imgRun[i].style.zIndex = 1
            dots[i].style.backgroundColor = '#fff'
        }
        var td = setInterval(laal, 1000)

    </script>

 <ul id="item">
                <li class="items" style="z-index: 1;"><img src="./轮播图.jpg" height="660px" width="1800px" alt=""  class="carousel-img "></li>
                <li class="items"><img src="./轮播图/02.jpg" height="660px" width="1800px" alt="" class="carousel-img ">
                </li>
                <li class="items"><img src="./轮播图/03.jpg" height="660px" width="1800px" alt="" class="carousel-img ">
                </li>
                <li class="items"><img src="./轮播图/04.jpg" height="660px" width="1800px" alt="" class="carousel-img ">
                </li>
                <!-- 左右按钮 -->
                <div id="left" style="display: none;"><img src="./轮播图/向左_o.png" width="30px" alt=""></div>
                <div id="right" style="display: none;"><img src="./轮播图/向右箭头.png" width="26px" alt=""></div>
                <!-- 小原点 -->
                <ul id="dot">
                    <li class="dots" style="background-color:#fff"></li>
                    <li class="dots"></li>
                    <li class="dots"></li>
                    <li class="dots"></li>
                </ul>
            </ul>
                    

Answer 1

清除定时器并td 赋值为 null，鼠标移出时判断，判断是否td是否为null ，为null 添加，否则先清除原定时器 ，在添加新的定时器