08-JavaScript BOM定时器及JS动画

目录

1. 设置定时器

1.1设置超时定时器

1.2 清除超时定时器

1.3 设置间歇定时器

1.4 清除间歇定时器

2. JS动画

2.1 匀速动画

2.2 缓动动画

---

1. 设置定时器

1.1设置超时定时器

超时调用需要使用window对象的setTimeout()方法，该方法接受两个参数：调用函数或计算表达式和以毫秒为单位的时间（即在执行代码前需要等待多少毫秒）。

//setTimeout(callback, after)
//callback  时间到了之后要执行的方法；
//after     多长时间之后去执行这个方法

//设置超时定时器
//调用函数
setTimeout("fun()", 3000);
//执行js代码
setTimeout("alert(“Hello world”)", 3000);
//直接写执行方法
var timeoutId = setTimeout(function(){
alert(“Hello world”);}, 1000);

1.2 清除超时定时器

//取消定时器
clearTimeout(timeoutId);

只要是指定的时间尚未到来之前调用clearTimeout()，就可以取消掉超时定时器。

1.3 设置间歇定时器

间歇定时器与超时定时器类似，只不过它会按照指定的时间间隔重复执行代码，直到间歇定时器被取消或者页面被关闭。

//setInterval(callback， repeat）
//callback：回调方法
//repeat: 每隔多长时间调用一次，单位是毫秒（ms）。

设置间歇定时器的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。如下例：

//设置间歇定时器
setInterval(function(){
    console.log(“Hello world”);
}, 1000);

1.4 清除间歇定时器

调用setInterval()方法同样会返回一个定时器的唯一标识（ID）。要取消间歇定时器，可以用clearInterval()方法并传入相应的ID值就行了。

clearInterval(intervalId);

2. JS动画

主要实现以下几种简单的动画效果（其实原理基本相同）：

1.匀速动画：物体的速度固定

2.缓动动画：物体速度逐渐变慢

2.1 匀速动画

（以物体左右匀速运动为例）

• 动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。

• 将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；

• 然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；

• 当物体到达目标位置时清除定时器；

2.2 缓动动画

（和匀速运动相同原理，只不过速度做些改变）

• 让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；

• 二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整；