探索JavaScript定时器

最新推荐文章于 2024-11-06 15:44:59 发布

China_lv001

最新推荐文章于 2024-11-06 15:44:59 发布

阅读量203

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_63125358/article/details/132642102

版权

文章目录

前言
一、一次性定时器setTimeout
二、重复性定时器setInterval
三、时间的误差
四、消除定时器
五、定时器清除的方法
- - JavaScript语言特性
总结

前言

JavaScript定时器是Web开发中常用的工具，它们允许我们在指定的时间间隔内执行代码，从而实现定时任务和动态交互效果。本文将深入探索JavaScript定时器的不同类型和用法，并介绍如何实现精确的时间控制。

提示：以下是本篇文章正文内容，下面案例可供参考

一、一次性定时器setTimeout

标准：在指定的毫秒数后调用函数或计算表达式。

口语：使一段代码在指定时间后运行。

语法

setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。
lang	可选。脚本语言可以是：JScript VBScript JavaScript

案例

<body>
    <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
    <button onclick="myFunction()">我是按钮，点我</button>

    <script>
        function myFunction() {
            setTimeout(function () {
                alert("Hello")
            }, 1000 * 3);
        }
    </script>
</body>
</html>

二、重复性定时器setInterval

标准：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

口语：可以使一段代码每过指定时间就运行一次。

语法

setInterval(code,millisec,lang)

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang	可选。 JScript VBScript JavaScript

案例

<body>
    <input id="clock" />
    <button onclick="clearDate()">别变了，快停止吧，点我！</button>
    <script type="text/javascript">
        const id = setInterval(() => {
            const date = new Date();
            const time = date.toLocaleTimeString();
            document.getElementById("clock").value = time;
        }, 1000);
        function clearDate() {
            clearInterval(id)
        }
    </script>
</body>
</html>

三、时间的误差

setInterval指定的是开始执行之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。

比如，setInterval指定每100ms执行一次，每次执行需要5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee, 2000);
}, 2000);

四、消除定时器

在使用定时器的时候，需要有一个好的习惯，那就是清除定时器，特别是对于重复型定时器，一定要及时清除。

五、定时器清除的方法

相对于两种创建定时器的方法，Js也给出了相对应的清除方法，分别是clearTimeout(obj)和clearInterval(obj)。

在看到这两种方法都是接收一个参数，这个参数就是定时器的标识，这个标识在使用定时器的时候被定义用来接收定时器方法的变量。

案例

// 一秒之后打印
const test1 = setTimeout(function(){
   console.log('hello world')
},1000);
// 每秒打印一次
const test2 = setInterval(function(){
  console.log('hello world')
},1000)
// 清理定时器
clearTimeout(test1);
clearInterval(test2)