javascript里的这两个定时器函数,大家一定耳熟能详:

setTimeout("函数()",毫秒)就是开启一个计时器,指定毫秒后执行该函数一次。

有关定时器,javascript还有另一个类似的函数,setInterval("函数()",毫秒)。不同的是,setInterval不是指定时间后执行一次该函数,而是每隔指定时间执行该函数,连续不断,直到clearInterval()。

问题是,在实际使用过程中,发现javascript的定时器很不靠谱。说好的多少多少时间后执行,但给人的感觉是忽快忽慢。明明指定3秒后执行,竟然5、6秒后才触发,或者不到1秒就触发了!

查阅资料,说是javascript为单线程,setTimeout之后,就注册了一个事件,进入排队,有空才执行,所以就慢了。大意如此。但快的情况呢?好像没说。

javascript引擎只有一个线程,迫使异步事件只能加入队列去等待执行。

在执行异步代码的时候,setTimeout 和setInterval 是有着本质区别的。

如果计时器被正在执行的代码阻塞了,它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现(可能超过设定的延时时间)。

如果interval回调函数执行需要花很长时间的话(比指定的延时长),interval有可能没有延迟背靠背地执行。

上述这一切对于理解js引擎是如果工作的无疑是很重要的知识,尤其是大量的典型的异步事件发生时,对于构建一个高效的应用代码片段来说是一个非常有利的基础。

JavaScript的计时器的工作原理

那么能不能修正呢?受网上文章启发,可以采用读取时间来应对:

setTimeout的时候,记录当前时间戳

函数触发时,将时间戳与当前时间比较,看是否已经经过指定的毫秒数

时间未够,则继续setTimeout,步长可改为1秒

否则执行

<html>
<head>
</head>
<body>
<input type="button" value="开启" onclick="start()" />
</body>
</html>
<script type="text/javascript">
var t;
var marktime = 0;
var offset = 3000;
function start(){
marktime = new Date().getTime();//1970年1月1日以来的毫秒数
t = setTimeout("hi()",offset);//3000毫秒后触发
}
function hi(){
if (new Date().getTime() - marktime < offset) {//时间未够
t = setTimeout("hi()",1000);//一秒后再来看看
return;
}
alert("Hello World!");
}
</script>

以上方法可应对比指定时间快的情况。

至于clearTimeout,经测试

var t = setTimeout("hi()",1000);
clearTimeout();//不起任何作用
clearTimeout(t);//将计时器t消除

setTimeout的作用,就是注册一个计时器,计时器之间各自独立,不会覆盖和干扰;注册多少遍,就有多少个,执行指定函数后自己释放。所以每次setTimeout,应该获取返回值,以便操控:

var t = setTimeout("hi()",1000);
clearTimeout(t);//将计时器t消除

setTimeout不可靠的修正办法及clearTimeout的更多相关文章

  1. js中如果遇到低版本安卓设备调用setTimeout不生效解决办法

    工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeo ...

  2. JS之setTimeOut与clearTimeOut

    小练习1:针对HTML,分别使用 setTimeout 和 setInterval 实现以下功能: 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0 在动 ...

  3. SetTimeOut jquery的作用

    1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...

  4. js中的SetTimeOut

    1. SetTimeOut()              1.1 SetTimeOut()语法例子              1.2 用SetTimeOut()执行Function           ...

  5. JS中setTimeout()的用法详解

    1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...

  6. Js setTimeout 用法

    setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method. setTi ...

  7. JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

    一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...

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

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

  9. setTimeout 和 setInterval 的区别

    setTimeout (表达式,延时时间)setInterval(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout   在执行时,是在载入后延迟指定时间 ...

随机推荐

  1. kvm中内存过载使用

    与CPU过载使用类似,在KVM中内存也是允许过载使用(over commit)的,KVM能够让分配给客户机的内存总数大于实际可用的物理内存总数. 由于客户机操作系统及其上的应用程序并非一直100%地利 ...

  2. LeetCode01--两数之和

    ''' 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素. 示例: 给 ...

  3. 大数据学习——点击流日志每天都10T,在业务应用服务器上,需要准实时上传至(Hadoop HDFS)上

    点击流日志每天都10T,在业务应用服务器上,需要准实时上传至(Hadoop HDFS)上 1需求说明 点击流日志每天都10T,在业务应用服务器上,需要准实时上传至(Hadoop HDFS)上 2需求分 ...

  4. BestCoder Round #90 A+B题解!

    BestCoder Round #90 A  Kblack loves flag 题意有点迷不造思路很简单但不造怎么求随机数,纠结了一会后直接粘上题目所给的代码稍加修改A了. const int _K ...

  5. bzoj3572[Hnoi2014] 世界树 虚树+dp+倍增

    [Hnoi2014]世界树 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1921  Solved: 1019[Submit][Status][Dis ...

  6. PHP建立和删除目录

    <?php/*linux中的文件权限filedir 用户 组 其它 rwx rwx rwx 读写执行 6 4 6 读写 读 读写 7 7 7 rw_ r__ rw_ r__ _w_ ___ r ...

  7. 蓝桥杯 算法训练 最短路 [ 最短路 bellman ]

    传送门   算法训练 最短路   时间限制:1.0s   内存限制:256.0MB     锦囊1   锦囊2   锦囊3   问题描述 给定一个n个顶点,m条边的有向图(其中某些边权可能为负,但保证 ...

  8. Android资源目录结构

    资源目录结构 res为资源目录,主要以xml语法编写静态的资源. 资源的命名标准:小写字母和数字,且以小写字母开头. 资源的生成,为了和java语法沟通,资源文件会自动的生成在[gen]目录的R.ja ...

  9. POJ3177,/3352.求最少添加多少边使无向图边双连通

    俩个题一样.tarjan算法应用,开始求桥,WA,同一个边双连通分量中low值未必都相同,不能用此来缩点.后来用并查集来判断,若不是桥,则在一个双连通分量中,并之,后边再查,将同一个双连通分量中的点通 ...

  10. python学习之-- socketserver模块

    socketserver 模块简化了网络服务器的编写,主要实现并发的处理. 主要有4个类:这4个类是同步进行处理的,另外通过ForkingMixIn和ThreadingMixIn类来支持异步.sock ...