57 BOM之window对象——定时器

JavaScript中可通过 window对象提供的方法实现在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。

1、间隔性定时器与延时性定时器的区别

间隔型定时器 setInterval(fun,time)

• fun为执⾏的函数
• time为间隔执⾏的时间，单位为毫秒，每过time时间就执⾏⼀ 次fun⾥⾯的代码

延时型定时器 setTimeout(fun,time)

• fun为执⾏的函数
• time为延时执⾏的时间，单位为毫秒，经过time时间后执⾏ fun代码，只执⾏⼀次

clearInterval 清除间隔性定时器
clearTimeout 清除延时性定时器

setTimeout()和setInterval()方法区别：
相同点：都可以在一个固定时间段内执行JavaScript程序代码。
不同点：setTimeout()只执行一次代码，setInterval()会在指定的时间后，自动重复执行代码。

setTimeout()方法在执行一次后即停止了操作；setInterval()方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。
若要在定时器启动后，取消该操作，可以将setTimeout()的返回值（定时器ID）传递给clearTimeout()方法；或将setInterval()的返回值传递给clearInterval()方法。

2、如何停止定时器（取消定时器）

3、利用间隔性定时器计数

4、利⽤间隔性定时器制作无缝滚动图片展示

offsetWidth：为元素的width+元素的padding+边框的宽度。

如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）

5、利⽤延时性定时器制作延时提示框

当⿏标移⼊⼩div的时候，会有⼀个弹窗⼤div（例如下拉列表）显示在隔壁，⿏标离开两个div的时候，弹窗div延时消失。


鼠标移入div1，显示div2。鼠标移出div1时，隐藏div2。
为了鼠标能移入div2，故设置div2延时0.5s消失。

鼠标移入div2后，div2会消失。故给div2设置鼠标移入事件。

鼠标移入div2，05s后div2仍会消失。原因是0.5后，oDiv1.onmouseout中的延时定时器会执行。故需要在定时器执行之前取消定时器。。

鼠标移出div2时，让div2延时0.5s消失。

新的问题来了，鼠标移入div1后，移动到div2，再移回div1时，div2会延时0.5后消失，并没有永久显示出来。是因为oDiv2.onmouseout中的延时定时器会执行。

最后优化代码如下：

6、案例：限时秒杀

7、练习

（1）动态显示52中制作的倒计时，每隔1秒显示一次。


会出现1秒的空档，修改如下：