setTimeout和setInterval,这两个js函数都是用来定时执行。setTimeout执行一次,setInterval执行多次。

问题出现在今天,使用setInterval是,设置执行速度为1ms。这时setInterval就出现了延迟。它并没有严格按照1ms的速度执行。

  var speed1=;
  task1 = setInterval(function(){
var val1=parseInt(document.getElementById('font1').innerHTML);
if(val1> && val1<=){
val1--;
document.getElementById('font1').innerHTML=val1;
}else{
clearInterval(task1);
}
},speed1);

问题的原因要从javascript的单线程机制说起。对于长时间执行的任务设置短暂的时间间隔,那么在第一次执行完成之前,可能会由于执行不断的迭代造成延迟。因为setInterval的回调函数并不是到时后立即执行,而是等系统资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害。

  其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。 
而如何计算插入的时间点呢?自然是要用到我们所说的timer,也就是计时器。当执行setTimeout和setInterval的时候,timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时,就触发timer callback,也就是我们设定的回调函数。事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行(或者说异步执行)。所谓的异步只是一个假象——它同样运行在一个线程上!

理解setTimeout和setInterval的更多相关文章

  1. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  2. 深入理解setTimeout和setinterval

    以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...

  3. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  4. setTimeout和setInterval的深入理解

    以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起 大概半年前发表过一篇关于setTimeout和se ...

  5. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  6. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  7. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  8. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  9. setTimeout,setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

随机推荐

  1. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. django配置文件环境分离后celery的启动方式整理

    django项目中,当配置文件分离时: 启动方式1: 硬编码写死在manage.py中: os.environ.setdefault("DJANGO_SETTINGS_MODULE" ...

  3. Win7远程桌面_ZC01

    1.Win7的远程桌面,在一开始设置成全屏显示,当远程桌面窗口 切换为非全屏的状态时,要想再切换成全屏状态 就比较困难了(我的笔记本ThinkpadE440一直没有弄成功...) 1.1.网上搜索各种 ...

  4. The Quantum L3 router and floating IPs

    This post shows how the Quantum L3 Agent uses the Linux IP stack to implement the Quantum L3 Routing ...

  5. BZOJ 3391 [Usaco2004 Dec]Tree Cutting网络破坏:dfs【无根树 节点分枝子树大小】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3391 题意: 给你一棵无根树,求分支size均不大于一半点数的点. 题解: 假定1为根. ...

  6. mysql的SQL_CALC_FOUND_ROWS 使用 类似count(*) 使用性能更高

    mysql的SQL_CALC_FOUND_ROWS 使用 类似count(*) 使用性能更高 在很多分页的程序中都这样写: SELECT COUNT(*) from `table` WHERE ... ...

  7. PHP获取当前日期及本周一是几月几号的方法

    这篇文章主要介绍了PHP获取当前日期及本周一是几月几号的方法,涉及php时间戳.日期转换与运算相关操作技巧,需要的朋友可以参考下 本文实例讲述了PHP获取当前日期及本周一是几月几号的方法.分享给大家供 ...

  8. Python解决中文字符的问题

    from __future__ import unicode_literals print(type("test")) #<type 'unicode'> Chinat ...

  9. [转]HTTP中cache-control的应用及说明

    网页的缓存是由http消息头中的“Cache-control”来控制的,常见的取值有private.no-cache.max-age.must-revalidate等,默认为private.其作用根据 ...

  10. js之__proto__原型链

    可参考: http://blog.csdn.net/irelandken/article/details/7297490