JS定时器

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

「已注销」

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

阅读量951

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ★B/S 文章标签： js定时器

本文链接：https://blog.youkuaiyun.com/Hellen0708/article/details/103258304

★B/S 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中的setTimeout和setInterval定时器的工作原理，包括它们如何与事件队列交互，以及在遇到异步事件如鼠标点击和死循环时的行为。同时，文章通过三个示例解释了定时器在单线程执行中的特性，强调了this的指向问题及其解决方案，并提到了定时器的最小延迟限制和执行策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定时器

什么是定时器？作用？
JS提供了一些原生方法来实现延时去执行某一段代码，下面简单介绍两种计时器。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

setTimeOut：

 setTimeOut(code,millisec,lang)
 
 code:必选，要调用的函数后要执行的JavaScript代码串。
 millisec：必选，在执行代码前需等待的毫秒数。
 lang：可选，脚本语言可是是：JScript/VBScript/JavaScript

setInterVal:

 setInterVal(code,millisec,lang)
 
 code:必选，要调用的函数后要执行的JavaScript代码串。
 millisec：必选，在执行代码前需等待的毫秒数。
 lang：可选，脚本语言可是是：JScript/VBScript/JavaScript

基本用法

setTimeOut：

<script type="text/javascript">
function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);//3s后输出一次"Hello"
}
</script>

setInterVal:

<script type="text/javascript">
function myFunction()
{
    setInterval(function(){alert("Hello")},3000);//每3s输出一次"Hello"
}
</script>

// 下面代码执行之后会输出什么？
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

//分别输出2 4 5，clearTimeout是取消设定的定时器

定时器题目

题目一
在这里插入图片描述
题目二

题目三
在这里插入图片描述

JS定时器的工作原理

在解释上面问题的答案之前我们先来了解一下定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。

在这里插入图片描述

上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：

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

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

答案

题目一

alert永远不会被执行。因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t){}直接进入死循环一直占用线程，不给回调函数执行机会。

题目二

代码会输出 5 5 5 5 5，理由同上，当i => 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前JS代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5

题目三

这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:

var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        var self = this; // 这里将this赋给一个变量
        setTimeout(function () {
            self.shout();
        }, 0);    
    }
};
obj.waitAndShout();