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 在执行时,是在载入后延迟指定时间 ...
随机推荐
- python 装饰器模拟京东登陆
要求: 1.三个页面:主页面(home).书店(book).金融页面(finance)2.有两种登陆方式:主页面和书店页面使用京东账户登陆,金融页面使用微信账户登录2.输入:1 ,进入主页面,以此类推 ...
- 3.3.4 使用 awk 重新编排字段
awk 本身所提供的功能完备,已经是一个很好用的程序语言了.以后会好好地介绍该语言的精髓.虽然 awk 能做的事很多,但它主要的设计是要在 Shell脚本中发挥所长:做一些简单的文本处理,例如取出字段 ...
- 73. Spring Boot注解(annotation)列表【从零开始学Spring Boot】
[从零开始学习Spirng Boot-常见异常汇总] 针对于Spring Boot提供的注解,如果没有好好研究一下的话,那么想应用自如Spring Boot的话,还是有点困难的,所以我们这小节,说说S ...
- COJ 1208 矩阵快速幂DP
题目大意: f(i) 是一个斐波那契数列 , 求sum(f(i)^k)的总和 由于n极大,所以考虑矩阵快速幂加速 我们要求解最后的sum[n] 首先我们需要思考 sum[n] = sum[n-1] + ...
- 【贪心+DFS】D. Field expansion
http://codeforces.com/contest/799/problem/D [题意] 给定长方形的两条边h和w,你可以从给出的n个数字中随意选出一个x,把h或者w乘上x(每个x最多用一次) ...
- hdu 4460spfa用map来实现
#include<stdio.h> #include<string.h> #include <iostream> #include <algorithm& ...
- hdu 2063最大匹配
#include<stdio.h> #include<string.h> int link[600],mark[600],map[600][600],m,n; int find ...
- ORACLE金额转换成英文大写的函数
用法如下:get_capital_money(Currency, Money) Currency: 货币或货币描述,将放在英文大写的前面: Money:金额.支持两位小数点.如果需要更多的小数点,请自 ...
- HTTP错误:java.lang.IllegalArgumentException: Illegal character in scheme at index 0: http://xxxxxx
读取T卡文件里的域名,HTTP请求出现如下错误 java.lang.IllegalArgumentException: Illegal character in scheme at index 0: ...
- 2016 Multi-University Training Contest 7 solutions BY SYSU
Ants 首先求出每个点的最近点. 可以直接对所有点构造kd树,然后在kd树上查询除本身以外的最近点,因为对所有点都求一次,所以不用担心退化. 也可以用分治做,同样是O(NlogN)的复杂度. 方法是 ...