js中的定时器如何使用

最新推荐文章于 2024-05-31 08:30:00 发布

祎祎呀

最新推荐文章于 2024-05-31 08:30:00 发布

阅读量1.4k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_47592687/article/details/109772925

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。
首先，我们先来了解一下什么是定时器：

JS提供了一些原生方法来实现延时去执行某一段代码
下面来简单介绍一下

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

setTimeout(code,millisec,lang)

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

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

setInterval(code,millisec,lang)

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

setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现)，类似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);

immediateId: 定时器ID
func: 回调

requestAnimationFrame: 专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定（帧）

var requestId = window.requestAnimationFrame(func);

func: 回调

上面简单的介绍了四种JS的定时器，但是常用的定时器就两种：setTimeout和setInterval。

我们今天就用这两个定时器，写两个简单的小例子吧
在这里插入图片描述
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:

<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

</body>
</html>

setTimeout()的小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

<script>
function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

我们再来讲讲，如何清除定时器吧

只生成了一个定时器清除方式（例）：

var timer; function timeout(){
    timer = setTimeout(function(){
        alert('清除定时器')
    },3000)
}
clearTimeout(timer);

如果是循环体内生成的多个定时器清除方式（例）：

var timeOut = [];

for (var number = 0; number < 100; number++) {
    (function (a) {
        timeOut.push(setTimeout(function () {
            alert('清除定时器'+a)
        }, a * 1000));
    })(number);
}
for (var i = 0; i < timeOut.length; i++) {
    clearTimeout(timeOut[i]);
}

JS定时器的工作原理

我们了解一下定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。
在这里插入图片描述
上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：

程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

最后，我们再来说说需要注意的点

1、setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同
2、因为JS引擎只有一个线程，所以它将会强制异步事件排队执行
3、如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行
4、this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

祎祎呀

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js中的定时器如何使用

JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。首先，我们先来了解一下什么是定时器：JS提供了一些原生方法来实现延时去执行某一段代码下面来简单介绍一下setTimeout() ：在指定的毫秒数后调用函数或计算表达式。setTimeout(code,millisec,lang)参数描述code 必需。要调用的函数后要执行的 JavaScript 代码串。
复制链接

扫一扫