第十六天

1-什么是事件委托，原理是什么？

　　原理：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
　　作用：减少DOM操作，节省内存空间，提高性能。

2-js 中有几种定时器，有什么区别？

　　settimeout和setinterval

　　执行次数不同,一个执行一次,一个重复执行

3-如何清除定时器？

　　cleartimeout()

　　clearinterval()

4-封装一个动画函数

　　function animate(el, target, step, dtime) {
　　/**
　　* 参数说明：
　　* - el 表示操作的元素对象
　　* - target 表示移动的目标距离 单位 px
　　* - step 表示步长，即每次移动的距离 单位 px
　　* - dtime 表示移动的间隔时间 单位 ms
　　*/

　　// 步长和间隔时间设置了默认值
　　step = step || 10;
　　dtime = dtime || 30;

　　// 判断是否开启定时器，如果有就清除
　　if (el.timeId) {
　　clearInterval(el.timeId);
　　el.timeId = null;
　　};

　　// 开启一个定时器，并将定时器挂载道当前元素上
　　el.timeId = setInterval(function () {
　　/**
　　* 获取盒子移动前的水平方向的位置（当前位置） - 偏移的位置
　　* - 可以使用 el.offsetLeft 获取，但会将外边距也获取到，不精准，不采用
　　* - 这里移动实现方式是改变 left的值，保持统一，还是使用 el.style.left 获取
　　* - 使用 el.style.left 有个弊端是，若元素对象上最初没有 left 属性时，获取返回的是 NAN
　　* - 这种情况只有在第一次会出现，故最开始的时候，还需要判断返回的值，若为 NAN，则重置为 0；如下
　　*/
　　var current = parseInt(el.style.left);
　　current = current ? current : 0;

　　// 判断目标距离是否小于当前位置，若小于将 步长 变为 负数，让元素反着移动
　　if (current > target) {
　　step = -Math.abs(step);
　　}

　　// 当目标距离与当前位置的差距小于步长时，直接当目标的水平位置设置为目标距离，并清除定时器后跳出函数
　　if (Math.abs(current - target) < Math.abs(step)) {
　　clearInterval(el.timeId);
　　el.style.left = target + 'px';
　　return;
　　}

　　// 定时器每执行一次，就让元素移动一个 步长
　　el.style.left = current + step + 'px';
　　}, dtime)
　　}