JS定时器

本文探讨了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();
关于JS定时器
  • setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同

  • 因为JS引擎只有一个线程,所以它将会强制异步事件排队执行

  • 如果setInterval的回调执行时间长于指定的延迟,setInterval将无间隔的一个接一个执行

  • this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

### JavaScript 定时器 `setTimeout` 和 `setInterval` 的使用方法 JavaScript 提供了两种主要的定时器函数:`setTimeout` 和 `setInterval`,它们用于延迟执行或周期性地执行一段代码。 #### 1. `setTimeout` `setTimeout` 函数用于在指定的时间后执行一次回调函数。其基本语法如下: ```javascript setTimeout(function, delay, param1, param2, ...); ``` - **function**: 要执行的回调函数。 - **delay**: 延迟的时间(以毫秒为单位)。 - **param1, param2, ...**: 可选参数,传递给回调函数。 例如: ```javascript function Fun3(str1) { alert(str1); } var timer = setTimeout(Fun3, 2000, "参数1"); // 2秒后弹出“参数1” clearTimeout(timer); // 清除定时器,防止执行 ``` 上述代码展示了如何设置一个定时器并在两秒后执行回调函数[^1]。如果需要提前停止定时器,可以使用 `clearTimeout` 方法[^3]。 #### 2. `setInterval` `setInterval` 函数用于每隔指定的时间间隔重复执行回调函数。其基本语法如下: ```javascript setInterval(function, delay, param1, param2, ...); ``` - **function**: 要执行的回调函数。 - **delay**: 每次执行之间的间隔时间(以毫秒为单位)。 - **param1, param2, ...**: 可选参数,传递给回调函数。 例如: ```javascript var counter = 0; var intervalId = setInterval(function () { console.log("计数:", counter++); if (counter > 5) { clearInterval(intervalId); // 当计数超过5时停止定时器 } }, 1000); // 每隔1秒执行一次 ``` 上述代码展示了如何设置一个每秒执行一次的定时器,并在满足条件时通过 `clearInterval` 方法停止定时器[^2]。 #### 区别与注意事项 - **执行次数**:`setTimeout` 只执行一次,而 `setInterval` 会不断重复执行直到被清除。 - **清除方法**:`setTimeout` 使用 `clearTimeout`,`setInterval` 使用 `clearInterval`。 - **返回值**:两者都会返回一个唯一的标识符,用于清除对应的定时器。 ### 示例代码 以下是一个结合 `setTimeout` 和 `setInterval` 的完整示例: ```javascript // 使用setTimeout setTimeout(() => { console.log("这是setTimeout输出"); }, 3000); // 使用setInterval let count = 0; const intervalId = setInterval(() => { console.log("当前计数:", count++); if (count > 5) { clearInterval(intervalId); // 停止计时器 } }, 1000); ```
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值