BOM之定时器

JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用。

 

一       setTimeout

  在等待指定的毫秒数后执行函数,语法如下:

  setTimeout(code/function, milliseconds, param1, param2, ...)

  方法接受2个或多个参数,第一个是一段JS代码或一个函数引用,第二个是需要等待的时间(以毫秒计),如果第一个参数是函数引用,并且需要传递参数,可以在后面依次传入。方法返回一个唯一id,代表该定时器,使用clearTimeout(id)可以清除定时器。

1 setTimeout(functon(){
2         console.log(new Date());
3     },3000);
4 console.log(new Date());
5 //立即显示一次当前时间,3秒后又将显示一次

  经测试发现:如果第一个参数是一段JS代码而非函数引用,该代码将立即被执行,而不会延时等待。

 

二     setInterval

  等同于 setTimeout(),但持续重复执行该函数。语法如下:

  setInterval(code/function, milliseconds, param1, param2, ...)

  使用方法和setTimeout()相同。

1 function timer(){
2     var d = new Date();
3     document.body.innerText = d;
4 }
5 setInterval(timer,1000);

  上面是一个简单的定时器示例。

  另外,setInterval方法有一个严重的缺陷,那就是不能确保执行时间的准确性。

在执行setInterval()时,假如我们设置每1s执行一次函数,但函数执行一次需要花费2s。浏览器会每隔1s就向一个事件队列中添加一个事件(即执行一次函数),当第一次执行完毕(3s之后了),这时队列中已经有2个事件正在排队了,于是浏览器立即执行第二个事件(等待队列中的第一个)。这样明显和我们本意每1s执行一次函数不符。所以在setInterval中,与其说第二个参数是延时时间,不如说是每个事件执行的最大间隔时间更为准确。因为当事件执行时间大于设置的间隔时间时,两个任务执行之间是没有间隔时间的。

  有些书上表示,到了设置的时间点,如果上一次的函数还没执行完,那么本次事件将不会被添加到事件队列中去,这次事件将被跳过,直到未来设置的某一时间点,前面的任务已经完成,才向队列中添加下一个事件。但浏览器实际上是按照第一种方式管理事件队列的,即到了时间不管前面的是否执行完毕,都插入一个进去,然后依次等待执行。(我用的Chrome  76.0.3869.100测试)

  setInterval主要应用在绘制动画效果上,鉴于它对时间的不准确性,要想获得完美的动画效果请使用CSS3的Animation实现。另外,如果确实需要使用,请务必把握好间隔时间的设置。下面是使用setInterval封装的一个运动函数:

 1 var timer;
 2 function startMove(obj,json,Fn){
 3     var key;
 4     clearInterval(timer);
 5     timer = setInterval(function(){
 6         for(var prop in json){//json是一个包含需要改变的属性和目标值的对象。
 7             var bridge;
 8             if(prop == 'opacity'){
 9                 bridge = getStyle(obj,prop)*100;//为了便于计算,先放大100倍
10             }else{
11                 bridge = parseInt(getStyle(obj,prop));
12             }
13             var speed = (json[prop] - bridge)/6;
14             speed = speed > 0?Math.ceil(speed):Math.floor(speed);//这里为了获得更好的动画效果,动态设置了运动速度。你当然可以给一个常数作为运动速度
15             if(prop == 'opacity'){
16                 obj.style[prop] = (bridge + speed) / 100;
17             }else{
18                 obj.style[prop]= bridge + speed + 'px';
19             }
20             if(bridge != json[prop]){
21                 key = false;
22             }else{
23                 key = true;
24             }
25             if(key){
26                 clearInterval(timer);
27                 if(Fn)Fn();//当目标运动完成,执行回调函数
28             }
29         }
30     },30);
31 }
32     
33 function getStyle(obj,prop){//获取css样式值
34     if(obj.currentStyle){//IE
35         return obj.currentStyle(prop);
36     }else{//其他
37         return getComputedStyle(obj,false)[prop];
38     }
39 }

 

  网上很多文章亦或是很多出版书籍都把这两个方法和DOM放在一起或者单独讲解,我想他们这么做的原因大概是这两个方法在JavaScript中主要应用在实现DOM元素的动画效果上。那么我为什么要把他们放在BOM里面讲呢?

  我们知道,JS的执行是单线程的,当代码运行到这两个方法时,理论上应该等待它绑定的代码执行完再往后执行其他代码,实际上他们并不会阻塞后面的代码,这又是为什么呢?原来每当遇到延时程序时,浏览器都会为它单独开启一个线程,换言之,他们的时间是由浏览器操纵的,而不是JavaScript。另一个明显的理由是这两个方法本来就是绑定在window对象上的,是由浏览器实现的,所以我把它放在BOM讲啦!

 

posted @ 2019-08-26 15:54 任风来去匆匆 阅读(...) 评论(...) 编辑 收藏