定时器和延时器

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

小豪boy

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

阅读量1.4k

点赞数

分类专栏： JavaScript学习笔记文章标签： html stm32 css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120338097

版权

JavaScript学习笔记专栏收录该内容

40 篇文章 2 订阅

订阅专栏

本文介绍了JavaScript的定时器setInterval和setTimeout的基本用法，包括设置间隔定时器、清除定时器以及它们在动画实现和异步编程中的应用。通过实例演示了如何创建和管理定时器，以及其在避免阻塞和实现动态效果中的作用。

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

定时器

setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔。

setInterval()函数可以接收第3、4……个参数，它们将按顺序传入函数。

具名函数也可以传入setInterval。

清除定时器

clearInterval()函数可以清除一个定时器。

示例：

<!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>

延时器

setTimeout()函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不再重复执行。

clearTimeout()函数可以清除延时器，和clearInterval()非常类似。

示例：

<!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>
    <button id="btn1">2秒后弹出你好</button>
    <button id="btn2">取消弹出</button>

    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var timer;

        btn1.onclick = function() {
            timer = setTimeout(function() {
                alert('你好');
            }, 2000);
        }

        btn2.onclick = function() {
            clearTimeout(timer);
        }
    </script>
</body>

</html>

初步认识异步语句

setInterval()和setTimeout()是两个异步语句。
异步（asynchronous）：不会阻塞CPU继续执行其他语句，当异步完成时，会执行“回调函数”（callback）。

使用定时器实现动画

使用定时器可以实现动画，利用的就是“视觉暂留”原理。

<!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>
        #box {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <button id="btn">开始运动</button>
    <div id="box"></div>

    <script>
        // 得到元素
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');

        // 全局变量盒子的left值
        var left = 100;

        // 按钮监听
        btn.onclick = function() {
            var timer = setInterval(function() {
                // 改变全局变量
                left += 10;
                if (left >= 500) {
                    clearInterval(timer);
                }
                // 设置left属性
                box.style.left = left + 'px';
            }, 20);
        };
    </script>
</body>

</html>