setInterval计时器延时问题

计时器延时问题

js计时器



使用setTimeout、setInterval函数时,第二个参数的设置的时间间隔t是自该函数(setTimeout(f1,t)、setInterval(f1,t))被调用时起,经过t毫秒后,f1被加入UI任务队列,但不一定执行,尤其是在期间有其他任务执行时,所以可能会有时间延时。因此使用setInterval函数制作计时器时,会出现延时。

  1. var startTime = new Date().getTime();
  2. var count = 0;
  3. /*setInterval(function(){
  4. var i = 0;
  5. while(i++ < 100000000);
  6. }, 0);*/
  7. function fixed() {
  8. count++;
  9. var offset = new Date().getTime() - (startTime + count * 1000);
  10. var nextTime = 1000 - offset;
  11. if (nextTime < 0) nextTime = 0;
  12. setTimeout(fixed, nextTime); //纠正延时
  13. console.log(new Date().getTime() - (startTime + count * 1000));
  14. }
  15. setTimeout(fixed, 1000);
时间: 2024-11-05 14:43:32

setInterval计时器延时问题的相关文章

解决setInterval计时器不准的问题

在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害. 下面的代码可以说明这个问题 ? 1 2 3 4 5 6 7 8 9 10 11 var startTime = n

setInterval 计时器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus&

JavaScript进阶 - 第8章 浏览器对象

第8章 浏览器对象 8-1 window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,window对象重点讲解计时器. 任务 在右边编辑器script标签内补充代码,弹出对话框"欢迎来到慕课网". 定义一个函数,实现打开一个网页,宽为600,高为400. 当点击"点击我,打开新窗口"按钮时,在打开网页. 如果忘记了,可以查看JavaScript基础篇. 代码

在淘宝里,他们总结的一些前端Tips

1.[约定]文件命名全部都用小写和下划线,样式命名全部使用小写和连接符,JS的钩子使用“J_HiTao” 2.[HTML]需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用以”data-“为前缀来添加自定义属性,避免使用”data:” 3.[约定]文件要求编码必须为GBK.GB2312或者GB18030 4.[HTML]html代码要求所有的标签.属性都是用小写字母,属性值使用双引号括起来,使用js插入html代码的时候也要注意保持一致. 3

JavaScript 进阶篇的学习~

---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已.我们还需使用JavaScript增加行为,为网页添加动态效果.准备好,让JavaScript带你进入新境界吧! JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等

笔记之_Java的html整理

border: 1px solid #000000 表格要边框不要内部的线 A标签禁止跳转,执行javascript的方法 href="javascript:void(0)" onclick="javascript:$('#dd').dialog('close')" 输入框不可编辑: 方法1: onfocus=this.blur() 当鼠标放不上就离开焦点 <input type="text" name="input1"

JS 之 Bom/Dom/节点

一.什么是BOM? 浏览器对象模型 二.BOM中的顶级对象是什么? window 三.window下有哪些子对象? document location history navigator frames screen 四.如何实现跳转页面? window.location location.href 五.如何刷新页面? location.reload([true]) history.go(0) 六.window下方法 1. alert() : 警告框 2. confirm() : 选择框 3. p

JS引擎线程的执行过程的三个阶段(二)

继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引擎线程执行, 不参与代码解析与执行. JS引擎线程: 也称为JS内核,负责解析执行Javascript脚本程序的主线程(例如V8引擎) 事件触发线程: 归属于浏览器内核进程,不受JS引擎线程控制.主要用于控制事件(例如鼠标,键盘等事件),当该事件被触发时候,事件触发线程就会把该事件的处理函数推进事件

JavaScript基础06——Math对象和日期对象

内置对象-Math: Math对象用于执行 数学任务,Math 不像 Date 和 String 那样是对象的类,因此没有构造函数Math().无需创建,直接把Math当成对象使用,就可以调用其所有的方法和属性. Math对象的静态属性: Math.E:常数e. Math.LN2:2 的自然对数. Math.LN10:10 的自然对数. Math.LOG2E:以 2 为底的e的对数. Math.LOG10E:以 10 为底的e的对数. Math.PI:常数π. Math.SQRT1_2:0.5