setTimeout不可靠的修正办法及clearTimeout
javascript里的这两个定时器函数，大家一定耳熟能详：
setTimeout("函数()",毫秒)就是开启一个计时器，指定毫秒后执行该函数一次。
有关定时器，javascript还有另一个类似的函数，setInterval("函数()",毫秒)。不同的是，setInterval不是指定时间后执行一次该函数，而是每隔指定时间执行该函数，连续不断，直到clearInterval()。
问题是，在实际使用过程中，发现javascript的定时器很不靠谱。说好的多少多少时间后执行，但给人的感觉是忽快忽慢。明明指定3秒后执行，竟然5、6秒后才触发，或者不到1秒就触发了！
查阅资料，说是javascript为单线程，setTimeout之后，就注册了一个事件，进入排队，有空才执行，所以就慢了。大意如此。但快的情况呢？好像没说。
javascript引擎只有一个线程，迫使异步事件只能加入队列去等待执行。
在执行异步代码的时候，setTimeout 和setInterval 是有着本质区别的。
如果计时器被正在执行的代码阻塞了，它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现（可能超过设定的延时时间）。
如果interval回调函数执行需要花很长时间的话(比指定的延时长)，interval有可能没有延迟背靠背地执行。
上述这一切对于理解js引擎是如果工作的无疑是很重要的知识，尤其是大量的典型的异步事件发生时，对于构建一个高效的应用代码片段来说是一个非常有利的基础。
那么能不能修正呢？受网上文章启发，可以采用读取时间来应对：
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的更多相关文章
- js中如果遇到低版本安卓设备调用setTimeout不生效解决办法
工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeo ...
- JS之setTimeOut与clearTimeOut
小练习1:针对HTML,分别使用 setTimeout 和 setInterval 实现以下功能: 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0 在动 ...
- SetTimeOut jquery的作用
1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...
- js中的SetTimeOut
1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function ...
- JS中setTimeout()的用法详解
1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...
- Js setTimeout 用法
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method. setTi ...
- JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...
- 深入理解定时器系列第一篇——理解setTimeout和setInterval
× 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...
- setTimeout 和 setInterval 的区别
setTimeout (表达式,延时时间)setInterval(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间 ...
随机推荐
- nginx 配置虚拟主机访问PHP文件 502错误的解决方法
最近配置Nginx 服务器虚拟主机 访问目录发现报502错误 百度了很多方法 都不管用 我擦 各种抓狂----- 原本Nginx配置如下: 网上找了很多方法: 查看日志 借助nginx的错误日志 ...
- 阿里云服务器ecs配置之安装mysql
安装mysql数据库 1.安装工作: 下载 mysql 源安装包 [root@ming ~]# wget http://dev.mysql.com/get/ ...
- [Android]使用button切换TextView可见和不可见
<Button android:id="@+id/btnTest" android:layout_width="match_parent" android ...
- Linux 下eval命令揭秘
eval 命令中文意思是“重新计算求出参数内容”,该命令大致有以下几个作用 将变量名替换后并执行 beautifulsoup4- Desktop Documents hc.war lxml- mybl ...
- HackerRank# The Coin Change Problem
原题地址 背包问题,没啥好说的,记得用long long,否则会爆 代码: #include <cmath> #include <cstdio> #include <ve ...
- [Vijos1512] SuperBrother打鼹鼠 （二维树状数组）
传送门 直接搞就行. 注意下表re从零开始,而树状数组搞不了0,所以统一增加一个偏移量1. (话说数据随机是什么鬼?) # include <iostream> # include < ...
- BZOJ 2763: [JLOI2011]飞行路线 【SPFA】
Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的价格.Al ...
- 【Kruscal最小生成树】D. Jungle Roads
https://www.bnuoj.com/v3/contest_show.php?cid=9154#problem/D [Accepted] #include<iostream> #in ...
- xth 砍树(codevs 1369)
题目描述 Description 在一个凉爽的夏夜,xth 和 rabbit 来到花园里砍树.为啥米要砍树呢?是这样滴,小菜儿的儿子窄森要出生了.Xth这个做伯伯的自然要做点什么.于是他决定带着rab ...
- 【BZOJ3295】动态逆序对（BIT套动态加点线段树）
题意:对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数. 给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序对 ...