闭包回调在动画设计中的应用
# 2. 闭包回调在动画设计中的应用
**知识点**
1. 函数式编程
2. 闭包与回调
----------------------------------------------
## 1. 函数式编程
- 代码复用
- 维护方便
----------------------------------------------
## 2. 闭包与回调
- 闭包创建在相互嵌套的函数中
- 闭包中的成员之间都是可见的,闭包函数可以调用与它同级的变量
- 简单来说: 子函数可以访问父函数中的变量,即使父函数作用域已经销毁
----------------------------------------------
### 示例: code/demo03.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包回调在动画设计中的应用</title>
<style>
#box {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 1px 1px #999;
background-color: lightgreen;
position: relative;
}
#box1 {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 1px 1px #999;
background-color: lightblue;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
<script>
// 全局调用, 每实现一次动画,必须创建三个全局变量: box, tick, timer
let box = document.getElementById('box');
let tick = 0;
let timer = setInterval(function () {
if (tick < 100) {
box.style.left = box.style.top = tick + 'px';
console.log(tick + ': left: '+ box.style.left + ', right: ' + box.style.top);
tick++;
} else {
clearInterval(timer);
}
},100);
let box1 = document.getElementById('box1');
let tick1 = 0;
let timer1 = setInterval(function () {
if (tick < 100) {
box1.style.left = box1.style.top = tick1 + 'px';
console.log(tick1 + ': left: '+ box1.style.left + ', right: ' + box1.style.top);
tick++;
} else {
clearInterval(timer1);
}
},100);
// 使用闭包,可以极大的简化代码
// 创建函数animate, 在内部创建闭包,变量box,tick,与time函数的参数回调,处于同一个词法作用域中,所以回调中可以直接访问
// 回调函数外部的变量tick,box
// 使用函数封装后,只会给全局添加一个函数标识符: animate, 并且不论调用多少次,也不会再创建全局成员, 污染全局环境
function animate(boxId) {
let box = document.getElementById(boxId);
let tick = 0;
let timer = setInterval(function () {
if (tick < 100) {
box.style.left = box.style.top = tick + 'px';
console.log(tick + ': left: '+ box.style.left + ', right: ' + box.style.top);
tick++;
} else {
clearInterval(timer);
}
},100);
}
animate('box');
animate('box1');
</script>
</body>
</html>
```
