16

1-什么是事件委托，原理是什么？
　　原理：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
　　作用：减少DOM操作，节省内存空间，提高性能。
2-js 中有几种定时器，有什么区别？
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
3-如何清除定时器？
给定时器加个id
clearInterval（id）
4-封装一个动画函数
<script>
function getStyle(element, attr) {
// 判断浏览器是否指该属性
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]
}
// 点击按钮，可以改变宽高，位置，透明度，层级
function animate(element, json, fn) {
// 清理定时器
clearInterval(element.timerId)
// 创建定时器
element.timerId = setInterval(function() {
// 创建标志位,确定定时器是否要清除
var flag = true
for (var attr in json) {
if (attr == "opacity") { //透明度
// 获取元素透明度
var current = getStyle(element, attr) * 100
// 变化步数
var target = json[attr] * 100
var step = (target - current) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step)
current += step
element.style[attr] = current / 100
} else if (attr == "zIndex") { //z-index属性
// 层级改变就是直接该属性值就可以
element.style[attr] = json[attr]
} else { //普通属性
// 获取元素当前属性值
var current = parseInt(getStyle(element, attr))
// 移动步数
var target = json[attr]
var step = (target - current) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step)
current += step
element.style[attr] = current + "px"
}
// 判断是否达到目标位置
if (current != target) {
flag = false
}
}
if (flag) {
clearInterval(element.timerId)
if (fn) {
fn()
}
}
}, 20)
}