【javaScript案例】之定时器的简单应用_尝试编制一个案例,使用上定时器-优快云博客

这篇博客介绍了一个简单的定时器应用，用于实现盒子在向右和向左平滑切换的效果。通过封装定时器函数，点击不同按钮时清除上一个定时器并设置新的运动方向。当盒子达到目标位置时，自动停止运动。代码示例展示了如何在JavaScript中实现这一功能。

这次的效果如下：

在这里插入图片描述
这次我们实现的效果是定时器的简单应用

那我们如何使盒子在向右和向左的切换之间不会产生磕绊呢？

我们可以使用同一个定时器，当点击不同的按钮时，清除上一个设定的定时器，再根据按钮的不同修改其运动方向即可。

具体要怎么实现呢？

我们可以将该定时器tem封装在一个函数中，点击不同的按钮时，传入想要到达的位置和单位时间运动的距离；

进入函数，首先判断定时器tem是否为空，若不为空，则调用clearInterval将其清空；然后将传入的想要到达的位置与盒子当前位置offsetLeft作比较，如果当前位置大于盒子想要到达的位置，说明盒子需要向左移动，则将传入的单位时间运动的距离修改为负值，否则不变；

接着开启一个定时器，在其中根据单位时间运动的距离改变盒子的位置，当盒子当前位置到达想要到达的位置时，调用clearInterval清除定时器。

代码如下：

<!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>
        #nav {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            position: absolute;
        }
    </style>
</head>

<body>
    <button id="btn">盒子向右移动</button>
    <button id="btnbtn">盒子向左移动</button>
    <div id="nav"></div>
    <script>
        var btn = document.getElementById("btn");
        var div = document.getElementById("nav");
        var btnbtn = document.getElementById("btnbtn");
        var tem = null;

        function fun(dis, dir) {
            if (tem != null) {
                clearInterval(tem);
            }
            if(div.offsetLeft>dis){
                dir=-dir;
            }
            tem = setInterval(() => {
                div.style.left = div.offsetLeft + dir + "px";
                var num = parseInt(div.style.left);
                console.log(num)
                if (dir > 0 && num > dis) {
                    clearInterval(tem);
                }
                else if (dir < 0 && num < dis) {
                    clearInterval(tem);
                }
            }, 30);
        }
        btn.onclick = function () {
            fun(800, 10);
        }
        btnbtn.onclick = function () {
            fun(0, 10);
        }

    </script>
</body>

</html>