29【定时器和延时器】

最新推荐文章于 2024-05-22 13:52:22 发布

VIP文章 DSelegent

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量821

点赞数

分类专栏： javaScript学习笔记文章标签： js 前端

本文链接：https://blog.csdn.net/DSelegent/article/details/126542830

版权

定时器和延时器

1.定时器

1.1 基本介绍

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

Interval：间隔

<!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>
    <script>
        var a = 0;

        setInterval(function () {
     
            console.log(++a);
        }, 1000);
    </script>
</body>

</html>

1.2 函数的参数

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

1.3 具名函数也可以传入setInterval

具名函数也可以传入 setInterval。

具名函数：有名称的函数。

匿名函数：无名称的函数。

1.4 深入

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

var i = 1
var timer = setInterval(function() {
   
  console.log(2);
}, 1000)

上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。

与setTimeout一样，除了前两个参数，setInterval方法还可以接受更多的参数，它们会传入回调函数。

下面是一个通过setInterval方法实现网页动画的例子。

var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
   
  opacity -= 0.1;
  if (opacity >= 0) {
   
    div.style.opacity = opacity;
  } else {
   
    clearInterval(fader);
  }
}, 100);

上面代码每隔100毫秒，设置一次div元素的透明度，直至其完全透明为止。

setInterval的一个常见用途是实现轮询。下面是一个轮询 URL 的 Hash 值是否发生变化的例子。

var hash = window.location.hash;
var hashWatcher = setInterval(function() {
   
  if (window.location.hash != hash) {
   
    updatePage();
  }
}, 1000);

setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。

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

var i = 1;
var timer = setTimeout(function f() {
   
  // ...
  timer = setTimeout(f, 2000);
}, 2000);

上面代码可以确保，下一次执行总是在本次执行结束之后的2000毫秒开始。

1.5 清除定时器

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 () {
     
            // 更改全局变量 timer 的值为一个定时器实体
            timer = setInterval(function () {
     
                oInfo.innerText = ++a;
            }, 1000);
        };

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

</html>

但是，此时有一个 BUG，那就是当重复点击时，会发生定时器叠加。

定时器叠加：同一时间有多个定时器在同时工作。

改进：

        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);
        };

2.延时器

2.1 基本介绍

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

2.2 深入

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay);

上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2

上面代码会先输出1和3，然后等待1000毫秒再输出2。注意，console.log(2)必须以字符串的形式，作为setTimeout的参数。

如果推迟执行的是函数，就直接将函数名，作为setTimeout的参数。

function f() {
   
  console.log(2);
}

setTimeout(f, 1000);

setTimeout的第二个参数如果省略，则默认为0。

setTimeout(f)
// 等同于
setTimeout(f, 0)

除了前两个参数，setTimeout还允许更多的参数。它们将依次传入推迟执行的函数（回调函数）。

setTimeout(function (a,b) {
   
  console.log(a + b);
}, 1000, 1, 1);

上面代码中，setTimeout共有4个参数。最后那两个参数，将在1000毫秒之后回调函数执行时，作为回调函数的参数。

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout使得方法内部的

最低0.47元/天解锁文章

DSelegent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
29【定时器和延时器】

29【定时器和延时器】
复制链接

扫一扫

专栏目录