定时器和延时器

最新推荐文章于 2024-09-10 13:15:01 发布

bubbleJessica

最新推荐文章于 2024-09-10 13:15:01 发布

阅读量403

点赞数

分类专栏： js 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128505816

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript中的定时器设置与清除，以及如何利用它们实现简单的动画效果。通过示例代码展示了如何使用setTimeout和setInterval，以及如何通过节流锁控制动画的执行方向，确保元素按预期移动。此外，还探讨了异步语句在JavaScript中的应用。

摘要由CSDN通过智能技术生成

设置定时器

清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="info">0</h1>
    <button id="btn1">开始</button>
    <button id="btn2">暂停</button>
    <script>
        var oInfo = document.getElementById('info');
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var a = 0;
        // 全局变量
        var timer;
        oBtn1.onclick = function () {
            // 为了防止定时器叠加，我们应该在设置定时器之前先清除定时器
            clearInterval(timer);
            // 更改全局变量timer的值为一个定时器实体
            timer = setInterval(function () {
                oInfo.innerText = ++a;
            }, 1000);
        };

        oBtn2.onclick = function () {
            clearInterval(timer);
        };
    </script>
</body>
</html>

设置延时器

清除延时器与清除定时器类似

初步认识异步语句

使用css3+js实现动画效果

我们希望正方形点一次往右移动，再点一次往左运动（前提得往右移动到终点，不会立即折返），这时需要设置节流锁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
<button id="btn">按我运动</button>
<div id="box"></div>

<script>
    // 得到元素
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    // 标识量，指示当前盒子在左边还是右边
    var pos = 1;  // 1左边 2右边
    // 设置节流锁 默认开启
    var lock = true;
    // 事件监听
    btn.onclick = function () {
        // 首先检查锁是否是关闭
        if (!lock) return;

        // 把过渡加上
        box.style.transition = 'all 2s linear 0s';
        if (pos == 1) {
            pos = 2;
            // 瞬间移动 由于有过渡，所以是动画
            box.style.left = '1100px';
        } else if (pos == 2) {
            pos = 1;
            box.style.left = '100px';
        }
        // 关锁
        lock = false;
        setTimeout(function () {
            lock = true;
        }, 2000);
    }
</script>

</body>
</html>