事件委托、定时器、清除定时器、封装动画函数

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

　　定义：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

　　原理：事件委托利用事件冒泡（从最深的节点开始，然后逐步向上传播事件）只在他们的父元素上指定一个事件处理程序，就可以管理某一类型的的所有事件。

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

　　两种

　　setInterval(函数,时间)

　　setTimeout(函数,时间)

　　区别：前者为循环定时器,后者只执行一次

3-如何清除定时器？

　　celerInterval()

　　clearTimeOut()

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)

}