JavaScript定时器（延时定时器和间歇定时器）

最新推荐文章于 2023-04-30 13:59:02 发布
最新推荐文章于 2023-04-30 13:59:02 发布
阅读量837 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： java 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wucms/article/details/107664961
本文介绍了JavaScript中的延时定时器和间歇定时器。延时定时器用于在指定时间后执行一次函数，如`setTimeout`；间歇定时器`setInterval`则会每隔固定时间重复执行函数，两者可通过`clearTimeout`和`clearInterval`清除。

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

JavaScript中有延时定时器和间歇定时器。区别在于，前者可以每隔一定时间执行函数，而后者一般只能执行一次函数。

一、执行一次命令(延时式定时器)

var t1 = window.setTimeout(function() {

console.log('2秒钟之后执行了')

},1000)

window.clearTimeout(t1)  // 去除定时器

二、 重复执行(间歇式定时器)
var t2 = window.setInterval(function() {

console.log('每隔2秒钟执行一次')

},1000)

window.clearInterval(t2)  // 去除定时器

js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
YY的博客
10-13 4748
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
JavaScript Web API的基本概念(DOM树、DOM对象)、获取DOM元素、修改元素内容(表单元素属性、自定义属性)、定时器(间歇函数、延时函数)
Bulut0907
05-13 921
<script></script>
js代码延迟一定时间后执行一个函数的实例
10-20
下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS定时器来间断性的执行函数
小熊Leo的专栏
12-05 2874
使用JS定时器来间断性的执行函数：　setTimeout("MyAutoRun()",1000); //隔1000毫秒就执行一次MyAutoRun()函数　　实现方法，将最上面的那JS函数，改为：functionn MyAutoRun() 　　{ 　　　//以下是您的函数的代码，请自行修改先！ 　　　alert("函数自动执行哦！"); 　　} 　　setTimeout("My
JavaScript学习笔记——延迟函数和间隔函数
403 Forbidden
09-10 432
延迟函数setTimeout setTimeout(延迟执行的函数,延迟多少毫秒,传入延迟函数的参数); //传入参数可选，如果有多个参数按顺序传入 function fn(){ console.log("延迟一秒出现"); } setTimeout(fn,1000);//注意是fn，不是fn()。如果是fn()会立即执行 //有参数传入时建议采用下述方式 setTimeout(function(){ fn(参数); },5000) 间隔函数setInterval setIn
《JS间隔.计时器》
weixin_44540689的博客
03-26 524
开发工具与关键技术：计时器的使用 作者：黄姗姗 撰写时间：2019.2.13 1.JS动画延迟效果：执行的代码串. 一次性计时器，设置一个点击动画延迟的效果。 首先要通过ID获取它的值，点击事件，延迟的时间。 第二个方法:调用函数设置。 2.3.点击计数.停止计数：通过ID获取它的值，添加一个点击事件，然后让这个数一直在加，就要用到一些变量，把它写在函数里面，让它点击加。之后再让它自动加，就要...
Web前端开发笔记之JS回顾05——DOM、间歇定时器
DRLDER的博客
03-31 964
目录 DOM树： DOM对象： 获取元素： 设置/修改元素： 修改元素属性： 修改样式属性： 表单类型属性修改： 间歇定时器： 由于基础中已经详细讲解过DOM是什么这里就不再赘述了。 下面来回顾一下，什么是DOM树： DOM树： 这里我们再回忆一下DOM对象： DOM对象： 至此，我们基本了解了DOM是什么，能干什么，下面我们来操作一下DOM： 获取元素： 当然我们也有多选的情况，可能在往期的学习分享中，我们是用getElemen...
JavaScript定时器setTimeout()和setInterval()详解
10-19
JavaScript定时器是编程中常用的工具，用于在特定时间间隔后执行特定任务。本文将深入探讨两种主要的定时器函数：`setTimeout()` 和 `setInterval()`。 1. **超时调用：setTimeout()** `setTimeout()` 是...
浅谈JavaScript超时调用和间歇调用
10-23
JavaScript提供了两种主要的异步编程机制：超时调用（setTimeout）和间歇调用（setInterval）。 首先，我们来探讨超时调用。setTimeout函数用于安排在指定的时间后运行一段代码。这个时间是延迟时间，而不是延迟...
Web API-定时器
crystal_iwwish的博客
10-06 366
间歇函数 //开启定时器，时间单位为毫秒，函数可以为匿名函数，也可以是有名字的函数 setInterval(函数, 时间) //关闭定时器 let 变量名 = setInterval(函数, 时间) clearInterval(变量名) 注意： 1. 函数名字不需要加括号 2. 定时器返回的是一个id数字 ...
JavaScript定时器
热门推荐
weixin_52629158的博客
04-30 1万+
setInterval() ：是属于 window 的方法，按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。其中 回调函数 "clock()" 可以写在 双引号中，也可以写在单引号中。setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。clearInterval() 方法 的参数 必须是由 setInterval() 返回的 ID 值。(这个内容 描红显示)
JS定时器和延时
Jamtin的博客
08-23 1010
JS定时器和延时 一个定时器demo： <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { var count = document.getElementById("count") var num = 1;
javascript学习-延迟函数和间隔函数
qq_43368682的博客
07-23 495
延迟函数： setTimeout(延迟做的函数，延迟多少毫秒)返回一个id。第三个参数往后(给延迟触发的函数传参)。此函数是在函数队列的最后执行。 取消延迟：clearTimeout(timeoutId); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <scrip
延迟和循环执行的定时器
AAAAAjam的博客
12-09 402
1.延迟定时器： new Handler().postDelayed(new Runnable() { public void run() { //TODo //startActivity(newIntent(SplashActivity.this,MainActivity.class)); if (PreferenceManager.getInstance().getTo...
定时器（间隔函数+延迟函数+回调函数）
qq_50260510的博客
03-23 1380
间隔函数---延迟函数----回调函数
【学习笔记】 Javascript定时器
少年休闲海
01-29 1703
Javascript定时器 Window对象提供的定时器功能，其基本功能是在规定的时间自定执行某个函数。 根据执行的机制，定时器又分为间歇定时器和延迟定时器。 间歇定时器：每隔一段时间执行指定函数（不断循环）； 延迟定时器：指定时间到期后执行指定函数（执行一次）； 间歇定时器 创建：使用window对象的setInterval()方法。 语法：定时器对象ID　＝　setInterval(函数调用/函数定义，毫秒)； 由于window对象是全局对象，访问同一个窗口的方法时，可以省.
JS14- 定时器和延时器
DcTbnk的博客
03-25 2051
定时器和延时器 定时器: setInterval( 参数1 , 参数2 ) 参数1: 必须是函数的形式,定义的是执行的程序 参数2: 定义时间间隔,每单位是毫秒 按照设定的间隔时间,循环执行设定的程序,直到清除定时器 延时器: setTimeout( 参数1 , 参数2...
自主学习js--定时器和延时器
Evlies的博客
04-25 867
延时器 1、setTimeout() setTimeout(function(){ console.log(111); },1000) 执行的效果就是在延迟了1秒钟之后后台打印出111的数据打印之后代码不会再次进行相关执行 定时器 2、setInterval() setInterval(function(){ console.log(222) },1000) 执行的结果就是每过一秒之后就会在后台打印出222的数据 定时器和延时器的区别 定时器在执行代码之后每过所设置的时间之后就会再次执行相关的代
JS中setTimout和setInterval的区别
小七爱干饭的博客
01-24 863
如果想重复执行某些代码，可以将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的。或者使用setInterval，需要clearInterval()手动停止。在JavaScript中，setTimeout()是延时器，setInterval()是定时器。setTimeout(fn(),delay)在执行时,是在载入后延迟指定时间后,去执行一次表达式,，而setInterval(fn(),delay)在载入后,每隔指定的时间就执行一次表达式 所以是不一样的。
定时器 js
最新发布
03-13
### 如何在 JavaScript 中使用定时器 #### 使用 `setTimeout` 实现一次性延时调用 为了实现一段代码或函数仅执行一次且是在特定时间之后，可以采用 `setTimeout()` 函数。此函数接收两个参数：第一个是要执行的回调函数；第二个是以毫秒计的时间长度，在这段时间过后会触发该回调函数[^1]。 ```javascript // 定义一个将在5秒后打印消息的一次性定时器 const timerId = setTimeout(() => { console.log('这是一条延迟了5秒才显示的消息'); }, 5000); ``` #### 使用 `setInterval` 创建周期性的任务调度 当希望按照固定的时间间隔不断重复运行某段逻辑时，则应该考虑利用 `setInterval()` 方法来创建循环定时器。同样地，它也接受相同的两类参数——待执行的操作以及每次操作之间的等待期（单位为毫秒）。值得注意的是，如果不再需要继续执行这个周期事件的话，记得通过相应的清除机制停止其运作以防止不必要的资源占用[^2]。 ```javascript let count = 0; // 设置每两秒增加一次计数并输出当前值直到达到十为止 const intervalId = setInterval(() => { if (++count >= 10) { clearInterval(intervalId); // 清除定时器以防无限增长 return; } console.log(`当前计数值为 ${count}`); }, 2000); ``` #### 终止已启动的定时器实例 无论是哪种类型的定时器，都可以借助于全局提供的 `clearTimeout()` 或者 `clearInterval()` 来提前结束它们的工作流程。这两个清理接口分别对应着各自的设定版本，并且都需要传入之前由对应的设定方法所返回的那个唯一标识符作为参数以便准确定位要取消的目标对象。 ```javascript // 取消先前定义好的一次性定时器 if (timerId !== undefined) { clearTimeout(timerId); } // 同样也可以用于终止间歇性活动 if (intervalId !== undefined) { clearInterval(intervalId); } ``` 除了上述两种常见的浏览器端定时方案外，在某些特殊场景下还可以探索其他更专业的替代品，比如针对动画优化过的 `requestAnimationFrame` API 或者专门面向服务器环境设计的 `setImmediate` 和 `process.nextTick` 等选项[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值