JS中setTimeout('startTime()',500)为什么通常设置500或者更小？

最新推荐文章于 2023-06-05 16:07:48 发布
最新推荐文章于 2023-06-05 16:07:48 发布
阅读量5.9k 收藏 3
点赞数
分类专栏： JavaScript 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li2327234939/article/details/53943314
版权 

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>
看上面的代码：

         Javascript中：小时钟t=setTimeout('startTime()',500)为什么隔500毫秒就刷新页面而不是每隔1000毫秒（即1秒）再刷新一次页面？

原因：
        这里的setTimeout是递归执行的。也就是在执行一次后，时间更新以后，才会设置下次的setTimeout，这里执行更新时间的代码也是要耗费时间的，因为javascript是脚本语言，又基于浏览器，性能比较差，而且更新时间是dome操作，比较慢。所以设置500能保证精度，避免延迟。
         如果设置1000毫秒刷新页面，由于程序的执行还需要时间，所有刷新页面的时间必然大于1000毫秒=1秒（假如是1.3秒（夸张点哈哈哈.....）），此时就有可能出现秒数不是依次增加1秒，例如：在开始执行程序时时间是12点30分30.9秒，而页面是精确到1秒，所有页面上显示的是12:30:30，如果设置1000毫秒（实际上是1.3秒）更新一次，则下次页面显示的时间是12点30分32秒（因为30.9+1.3=32.2）,直接跳过12点30分31秒，这样更新就不及时了，对吧？
           设置500毫秒更新一次页面是通常做法，但是也不能设置太小，刷新太频繁会造成浏览器负载的浪费。
li2327234939
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
setTimeout时间设置为0详细解析
08-27
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method，下面这篇文章主要给大家介绍了关于setTimeout时间设置为0的相关资料...
快速掌握Node.js中setTimeout和setInterval的使用方法
12-23
在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法。当调用setTime()时回调函数会在delayMillSeconds后 执行.setTime() 会返回一个定时器对象ID，可以在delayMillSeconds到期前将...
js让对象延迟500毫秒后显示文本在点击的位置
caowanglong1987的专栏
11-13 1284
让对象延迟500毫秒后显示在点击的位置 showSnailBiMsg(event){ var clientx =  event.clientX; var clienty =  event.clientY; var noticInfoFont = $("+"+30+"");       noticInfoFont.css("top", clienty).css("left", clie
JS 停留500毫秒后，执行 do_Search()
weixin_33962621的博客
07-26 1711
function doExcute1(userid,start,cityId){ var str="下架"; if(start==100){ str="删除"; } if(confirm("你确定要 "+str+" 此条信息吗？ ")){ //activityid journalId agentName phone loupa...
事件循环机制（宏任务与微任务）
D_Z_Yong的博客
04-18 240
js是单线程的，按照从上往下顺序执行，js引擎线程会在适当的时候去消息队列取出消息放到栈中，顺序执行的时候，比如说鼠标点击事件会放到消息队列中，对应的回调函数会先放到消息队列中等待，比如说栈中的func2是message1消息队列的函数，就是先要把栈里的函数全部执行完才会去消息队列里拿下一个message，如此循环就是事件循环（event loop）。但是呢，消息队列里有宏任务队列跟微任务队列，有限执行微任务队列里的，把所有的微任务队列里的都执行完了才会执行宏任务队列里的。
前端优化之防抖
m0_46166985的博客
01-21 205
WHAT 什么是防抖？ 当持续触发相同事件时，如果设定的时间到来之前，又一次触发了事件，就重新开始延时；如果设定的时间到来之后都没有再次触发事件，则执行最后一次事件。（就像王者荣耀的回城操作一样） HOW 应用场景 1. keyup事件（example：输入框 [验证用户名是否可用]） 普通版的输入框事件： 用户每按一下键盘都会发送一个ajax请求出去，用户还没输入完成，就发送了很多无用的请求，浪费性能。 <body> <input id="user" type="text" pl
Worker
starwmx520的博客
12-15 371
/*“父线程和worker线程有它们各自的独立空间，信息主要是来回交换而不是共享。” *worker遵守同源策略  */ var w; function startWorker(){ if( typeof(Worker) !== 'undefined'){ w=new Worker('worker.js'); w.postMessage('父级传递的'); //还可通过 addEv
input keyup 500ms 延时输入 事件处理
幻梦
07-12 922
==================input keyup 500ms 延时输入 事件处理==================var last; $(".input").keyup(function(event){//.input为你的输入框 last = event.timeStamp; //利用event的timeStamp来标记时间，这样每次的keyup事件都会修改
js函数节流和去抖动
有问题可关注公众号：前端研究院 后台输入问题回复
02-28 440
1.搜索框的事件监听 类似百度的那种自动 https://blog.csdn.net/aliguagua/article/details/78633309
vue延迟操作
最新发布
六六的小帅的博客
06-05 1万+
关于vue中延迟加载、执行、渲染
vue.js中实现方法内某些代码延时执行
付梦伟的博客
03-27 2万+
今天在工作时遇见了某些代码需要延时操作的情况。具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后，grid内数据能够及时更新以便显示增删改操作后的数据。这里的话使用的是vue.js中的setTimeout函数来解决该问题。代码如下： var that = this; setTimeout(function () { that.modifyDia...
JavaScript获取当天开始时间和结束时间
m0_61672533的博客
12-07 2378
JavaScript获取当天开始时间和结束时间
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
实例讲解JS中setTimeout()的用法
11-25
本文实例讲解了JS中setTimeout()的用法，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> &...
javascript中setTimeout使用指南
12-11
javascript中setTimeout使用指南 [removed] /* //方法1 function slows(){ alert("15S后弹出！"); } setTimeout("slows()",5000); //方法2 function slows(){ alert("15S后弹出！"); } ...
JS中encodeURIComponent（URL）编码与decodeURIComponent（URL）解码详解
热门推荐
木子李的博客
12-15 7万+
(1)   encodeURIComponent(url) 函数 定义和用法        encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 语法        encodeURIComponent(URIstring) 参数 描述        URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。 返回值
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性
木子李的博客
12-14 1万+
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性     var parentDiv = document.createElement("div");//创建父div parentDiv.className="CssStyle1";//给父div设置class属性 parentDiv.style.clear="both";//给父div的st
js中Boolean值为false和true的情况：
木子李的博客
12-30 1万+
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。       否则，其值为 true（即使当自变量为字符串 "false" 时）！
setInterval/setTimeout两者在JS中有什么区别
05-31
`setTimeout` 和 `setInterval` 都是 JavaScript 中用于定时执行代码的函数，但它们之间存在一些区别。 区别如下： 1. `setTimeout` 函数会在指定的时间后执行一次代码，而 `setInterval` 函数会每隔指定的时间就执行一次代码，直到被取消。 2. `setTimeout` 函数只执行一次代码，而 `setInterval` 函数会一直执行，直到被取消。 3. `setInterval` 函数的执行时间间隔不一定是精确的，因为它受到 JavaScript 引擎的性能和当前系统负载等因素的影响。如果执行时间过长，可能会导致多个回调函数同时执行。 下面是一些代码示例，展示了 `setTimeout` 和 `setInterval` 函数的使用： ``` // setTimeout 示例 function sayHello() { console.log("Hello!"); } setTimeout(sayHello, 3000); // 3秒后输出 "Hello!" // setInterval 示例 let count = 0; function incrementCount() { count++; console.log(count); if (count === 10) { clearInterval(intervalId); } } const intervalId = setInterval(incrementCount, 1000); // 每隔1秒输出一个数字，输出10个后停止 ``` 在上面的代码中，我们首先使用 `setTimeout` 函数在 3 秒后执行一个函数输出 "Hello!"。 然后，我们使用 `setInterval` 函数每隔 1 秒执行一个函数，输出一个数字。当数字到达 10 时，我们调用 `clearInterval` 函数停止执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值