JavaScript专精系列(5)---定时器和计时器
来源:互联网 发布:崩坏3rd淘宝代充 编辑:程序博客网 时间:2024/05/19 03:18
1、JavaScript的内在执行逻辑
学习JavaScript中,会出现一些我们难以理解的代码。之所以很难理解,我觉得很大程度上,我们对JavaScript的执行环境以及内在机制不够了解造成的。
var i = 5;setTimeout(function () { i++; console.log(i);},0);console.log(i);//执行结果是5,6!!
这段代码的执行结果是:5、6。
我想问:为什么不是6、5?这是为什么?
其实,这是和JavaScript的内在作用机制有关。一段代码的执行,它是有顺序的,这个顺序是一种优先排列的顺序。先把同步的代码排列到线程上,然后在这个线程上执行代码。再把其他的异步代码根据一定的规则排布的过程。其实就是JavaScript的执行过程。
特别注意:setTimout(fun,0);并不是0ms之后就会执行,而是0ms之后把代码排列到JavaScript代码的执行线程上。这个执行线程只保证尽快执行,不保证立即执行!
所以,示例中的代码,它的排布顺序就是:
(1)、i = 5;
(2)、console.log(i);
(3)、setTimeout
最终的结果就是,5和6。
2、实际开发中的延时器setTimeout
大多数有经验的人一般会使用setTimeout作为延时器,而不用setInterval,原因显而易见--------如果在setInterval的时间间隔内,JavaScript代码没有执行完毕,那样会出现问题的!(至于什么问题,后面讨论)
一般我们这样使用一个延时器。
var i = 0; function fun(){ i++; console.log(i); setTimeout(function () { fun(); },1000) } fun();
这样的一个好处就是,我等fun中的代码执行完毕,我再向后推迟1s执行函数。如果函数fun中进行了大量的dom操作,可能会耗费1s甚至更多的时间执行同步代码,setTimeout能够保证继续向后延期1s重新开始执行函数。(这样就不会引起setInterval的处理大量操作而影响排布的问题)注意:setTimeout 的合理使用,会对浏览器性能有很大的提升。
一个经典的示例是onresize事件中操作dom。
window.onresize事件是在窗口变化中不断触发的过程,如果在这个过程中,大量的进行dom操作,是非常耗费浏览器的性能的,如果这个时候,加一个setTimeout可能效果会好很多。
window.onresize = function(){ setTimeout(function(){ //dom操作代码 },200)}
3、setInterval的适用场景
setInterva有很多的缺点,对于浏览器来说,维护setInterval的代价要远远高于setTimeout。而且在很多情况下,适用setInterval显得很鸡肋。比如短时间内进行dom操作(这个时间一般在1000ms以内)、大量的数据读取等等。而且多个setInterval的使用,很可能会引起资源竞争,这对浏览器的负荷其实是很不友好的。
但是,setInterval其实还是有好处的!比如它很准时的特性!相对于setTimeout,setInterval是一种固定排列的方式执行代码,而setTimeout是一种延期的方式执行代码!!
同样的代码,如果setTimeout的逻辑总是把其他的代码执行完毕,然后在这之后把自己的代码块排布到线程上,而setInterval的逻辑是,只要当前时间自己的代码执行完,那么一定会在周期时间内把自己的代码排布到线程上。
所以,在精准和实时上,setInterval可能会满足你的需求。而且周期时间跨度大的情况下,可能setInterval也很不错。
阅读全文
0 0
- JavaScript专精系列(5)---定时器和计时器
- Javascript技巧之计时器和倒计时器
- JavaScript实现的计时器和倒计时器
- Javascript案例之计时器和倒计时器
- js中的定时器和计时器使用
- js中的定时器和计时器使用
- javascript实现定时器四秒后跳转到秋秋淘衣坊首页(setInterval计时器)
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
- 浅谈.NET中可用的定时器和计时器【上篇】
- Android CountDownTimer(倒计时器)和Chronometr(定时器)
- 利用setTimeout和SetInterval构建Javascript计时器
- javascript计时器
- javascript计时器
- JavaScript计时器
- JavaScript计时器
- javascript计时器
- javascript 计时器
- JavaScript计时器
- ios-锁和空间和单例知识点
- MatConvNet的安装和使用说明
- Java构造方法、重载、访问修饰符
- HTML常用标签列表
- Jzoj4771 爬山
- JavaScript专精系列(5)---定时器和计时器
- 【BZOJ1013】【JSOI2008】球形空间产生器 高斯消元
- DB2 DatabaseMetadata类的使用
- All the example files
- 使用宏定义对字符串进行处理#pragma
- 集合操作集合排序,内容筛选
- 51nod 1031 骨牌覆盖
- 目前开发手机app的几种方式?怎么判断一个APP是原生APP、混合APP还是WEB APP ?
- NOIP2017普及组复赛 总结