JS计时器,setTimeout与setInterval

最新推荐文章于 2024-09-19 14:36:08 发布
最新推荐文章于 2024-09-19 14:36:08 发布
阅读量439 收藏
点赞数
分类专栏： 大杂烩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beimingsama/article/details/52368505
版权
本文介绍了在JavaScript中使用setTimeout和setInterval创建计时器时遇到的问题及其区别。使用setTimeout会导致计时器速度翻倍，而setInterval虽然避免了重复计时，但连续点击开始按钮会导致计时暂停。文章提醒开发者注意这两个方法的使用场景和潜在问题。
摘要由CSDN通过智能技术生成


学习JS，今天学到关于计时的课程，自己写一个计时器
学习的方法是setTimeout()，所以一开始用这个方法写
看起来好像没有问题，点击按钮计时器开始了。
可以过一会发现，再点击开始计时的按钮时，会以两倍的速度计时，这是个非常严重的问题。



从网上看来的要用setInterval，然后写法也变得高大上起来
这样确实避免了计时器重复计时的问题，但是还是有一个小问题，
假如一直连续不断的点击开始计时的按钮，则会暂时停止计时...这个还未找到解决办法

最低0.47元/天 解锁文章
Hey！北北
关注
专栏目录
js setInterval()与setTimeout()计时器
苏墨
03-22 660
JavaScript是单线程语言，但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行。超时值是指在指定时间之后执行代码，间歇时间值是指每隔指定的时间就执行一次代码。在很多地方都可以用到定时器，比如各种倒计时，这里用京东秒杀倒计时来举例子。
JavaScript实现计时器
热门推荐
wordgg的博客
11-11 1万+
             第一次写文章，很多不足地方还请多多海涵。下面将带领大家实现一个JS计时器，首先看下效果图            首先添加了一个<span/>用于显示时间，两个<input>为一个"开始计时","停止计时"按钮。绑定了两个点击事件，具体函数下面一一实现。代码如下图         接下来就是实现计时功能的逻辑代码，首先定义了一个名为getTime()...
JS关于时间计时器setTimeout()和setInterval()实例
houzhyan-博客
03-30 2892
今天想写个倒计时的小应用,然后查了下两个函数setTimeout()和setInterval()都可以实现,都属于全局对象window。所以特地将js的这两函数的一些用法实例整理一下. 1.概念 1.setTimeout()HTML DOM Window 对象 定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 语法 setTime
js基础之setTimeout与setInterval原理分析
最新发布
京东科技开发者
09-19 885
由于JavaScript被设计为用在浏览器环境，而该环境下存在大量可能发生冲突的DOM操作，为了避免进行复杂的冲突处理（可能存在的冲突数量几乎不可预测），JavaScript的设计者舍弃了java的多线程模型（该模型下，执行引擎同时可以做几件事，但要进行线程同步），将其设计成了一门单线程语言（执行引擎在同一时间只做一件事）。setTimeout的运行机制相对简单，即在执行该语句时，设置一个定时器，定时时间置为所设置的延时，当计时结束后，将传入的函数加入任务队列，之后的执行就交给任务队列负责。
js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
Jack huang的专栏
09-11 446
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 1，基本用法： 执行一段代码： ...
JavaScript setTimeout和setInterval的用法与区别详解
青春木鱼的博客
01-01 2896
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成
用 setTimeout 模拟 setInterval解决计时器痛点
前端小白白的博客
06-12 593
文章来源：“前端自习课”公众号第986期 文章原标题是： 为什么要用 setTimeout 模拟 setInterval ？ JS缓动动画效果实现常用计时器 setInterval() 完成， setInterval() 有很多特性，但是用不好那就是一个个缺点 例如文章给我们指出的： setInterval 是一个宏任务 遇见多任务或者某个任务等待事件比较长（如网络请求） 就会有 推入任务队列后的时间不准确 函数操作耗时过长导致的不准确 这就跟之前写过的一个“简易动画”BUG很相似 .
JS中计时器setTimeout以及setInterval的使用以及for循环中延迟打印的坑
programmer_trip的博客
12-07 1646
JS中的函数使用 一、setTimeout： 格式： var intervalID = scope.setTimeout(function[, delay, param1, param2, ...]) // 参数在延时时间到达后，将作为该函数的传参，但是在不同浏览器存在兼容性问题，若需使用需做兼容性处理，具体参考链接1 var intervalID = scope.setTimeout(funct...
js 定时器 setTimeout和setInterval 区别
CMDN123456的博客
04-24 341
定时器,setTimeout 、setIntervl
js中setTimeout和setInterval性能详解
jason_renyu的博客
02-07 2002
在js中setTimeout和setInterval都是用来定时的一个功能，下面我来分别对两个函数进行一些自问自答，有需要了解的朋友可参考。 我以前看书上这样写的:setTimeout完全可以完成setInterval的作用，而且setTimeout是执行一次自动终止，setInterval则不需手动停止所以建议用setTimeout替代setInterval使代码避免出现末预期到的执行循环
JavaScript setInterval()与setTimeout()计时器
10-15
JavaScript中的`setInterval()`和`setTimeout()`是两个重要的计时器函数，它们允许开发者安排代码在特定的时间点或间隔执行。这两个函数对于创建动态交互、动画效果和定时更新内容等场景至关重要。 首先，`...
快速掌握Node.js中setTimeout和setInterval的使用方法
12-23
Node.js和js一样也有计时器,超时计时器、间隔计时器、及时计时器，它们以及process.nextTick(callback)函数来实现事件调度。今天先学下setTimeout和setInterval的使用。 一、setTimeout超时计时器(和GCD中的after...
javascript setTimeout和setInterval计时的区别详解
01-21
setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。setInterval方法则是表示间隔一定时间反复执行某操作。如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。...
javascript setTimeout和setInterval 的区别
10-29
JavaScript中的`setTimeout`和`setInterval`是两个重要的定时器函数，它们都属于全局`window`对象的方法，常用于在指定的时间后执行某段代码或周期性地重复执行某段代码。然而，它们的工作机制和用途有所不同。 1. ...
win7下的众多BEX错误问题
北冥de破草棚
10-14 1万+
前几天寝室一个同学的电脑出了问题，校园网的客户端一直无法登陆，错误信息提示是BEX错误，搞的我也很头大，所以去问度娘。 最后在百度里搜了许多各种各样的方法，最后下面这个方法解决了问题： 直接关掉DEP，方法如下： 从“开始”-“所有程序”-“附件”中找到“命令提示符”，右键选择“以管理员身份运行”，输入“bcdedit.exe/set {current} nx AlwaysOff
搜索栏两个input中间有间隙，如何解决？
北冥de破草棚
09-02 2887
今天练手写网站，发现一个问题，搜索栏两个input挨在一起，中间有一丢丢的间隙。 看了css，该清除的都清除了，那到底是哪出了问题，又该如何解决呢？ ==如下图，中间有一丢丢空隙： 有空隙时候的代码： 然后解决方法有两种： 1.将两个input紧挨写在同一行 2.为第一个input添加左浮动 .search{float:ledt;}没有空隙的显示样式： 至于其中原理….似懂非懂，
发现您正在使用代理软件...
北冥de破草棚
09-27 2347
问题如图： 解决办法： 打开我的电脑→→打开控制面板→→管理工具→→服务→→关闭Internet Connection Sharing (ICS)服务，并且设置为手动→→OK~
Chrome审查功能——大有可玩
北冥de破草棚
10-21 1871
从有电脑就开始使用chrome浏览器直到如今，从四年前开始知道chrome浏览器是有审查功能的，但是直到真正的静下心来去学习代码，才发现chrome浏览器的强大之处，以前真是有眼不识泰山啊，从现在起在学习的过程中不断摸索总结chrome浏览器审查功能的一些用法，记录下来。 -------------------- 10.21 查看元素:hover时的css代码 ==初始状态
收集一些有用的网站(不定期更新)
北冥de破草棚
10-19 1136
2016 -------------- 收藏夹里面网站过多，经常有些非常不错的网站收藏一下之后就扔在角落里面再也没去过了，甚是可惜。 没事的时候整理整理收藏夹，也将看到的不错的网站分享一下。 10.19 ●CSS3动画代码大集合 http://www.webhek.com/css3-animation-sniplet-collection?ref=myread#/ 描述：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值