day16

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

事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div（假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了。

原理：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

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

setTimeout和setInterval这两个定时器一旦触发，就是和js程序并行执行的，也就是他们并不在一个时间线上。计时器的作用是仅仅是做一个计划，那就是每隔一段时间执行一次目标方法。

一般情况下setTimeout用于延迟执行某方法或功能，

setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

3-如何清除定时器？

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。

定时器清除的方法：clearTimeout(obj)和clearInterval(obj)。（注意对于的定时器用对于的清除方法）

 

4-封装一个动画函数

function fn(a, b, c) {

console.log(c);

console.log(b);

// 先清除在执行 只保留一个定时器执行

clearInterval(a.ff)

// a.ff 表示：谁的函数 动态的

a.ff = setInterval(function () {

// 步长值要写在定时器的里面

// 把步长值改为整数 不要出现小数的问题

let step = (b - a.offsetLeft) / 10;

// 判断步长值 如果是正值，则步长往大了取整 如果是负值，则步长向小了取整

step = step > 0 ? Math.ceil(step) : Math.floor(step)

if (a.offsetLeft == b) {

// 停止动画(定时器)

clearInterval(a.ff)

// && 左右都是true的时候才会运行

c && c()

}

// 把每次加1 这个步长值改为一个慢慢变小的值 （目标值-现在的位置）/ 10

a.style.left = a.offsetLeft + step + 'px';

// console.log(a.offsetLeft);

}, 15) // 15 为多少毫秒 运动一次

}