### 1.延时器
```js
/* console.log(1);
setTimeout(function(){
console.log(2);
console.log(this);
},1000)
console.log(3);
for (var i = 0; i < 3; i++) {
setTimeout(function(){
console.log(i); // 此处输出3 3 3 setTimeout直接执行但是内部函数需要等待设置的时间后再执行
},10)//此处定时的10改为0,他也是最后执行,因为它属于慢程序,先执行快程序后再执行慢程序(慢程序也是按顺序执行,会依次执行慢程序中慢的,更慢的程序,直到执行完全部慢程序)
} */
//解决变量(内存)污染可以用闭包
for (var i = 0; i < 3; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 10)
})(i)
}
//程序执行时自上而下的,快速执行
//慢程序默认会在快的程序后面执行
//当:慢程序执行时,快程序中变量的值是什么?
var id = []
for (var i = 0; i < 3; i++) {
var res = setTimeout(function () {//res存的是srtTimeOut()的返回值
// clearTimeout 注意:是否全部清空
console.log(i);
}, 10)
id.push(res)
}
console.log(res);//[1, 2, 3]
// ----------------------------------------------------------------------
// console.log(1);
var a = setTimeout(function () {
// 执行慢程序
console.log(2);
// console.log(this);
}, 1000)
// console.log(3);
var id = []
for (var i = 0; i < 3; i++) {
// 返回值:表示执行的第几个setTimeOut()
// clearTimeout 注意:是否全部清清空
var res = setTimeout(function () {
console.log(i) // 3 3 3
},5)
id.push(res)
}
// i = 5;
// i = 7
// i = function(){}
// for (var i = 0; i < 3; i++) {
// (function (i) {
// setTimeout(function () {
// console.log(i) // 3 3 3
// }, 1000)
// })(i)
// }
// 程序执行是自上而下的,快速执行
// 慢的程序默认在快的程序后面执行
// 注意:当慢程序执行时, 快程序中变量的值是什么?
```
### 2.定时器
```js
<button id="start">开始</button>
<button id="end">暂停</button>
<h1>准备开始</h1>
//以上三行在body中不在script中
// 获取 id = start 的html标签
var start = document.querySelector('#start');
var end = document.querySelector("#end");
var h1 = document.querySelector('h1')
start.onclick = function(){
console.log('start run');
setInterval(function(){
var random = Math.round(Math.random()*100);
h1.innerHTML = random;
},50)
}
end.onclick = function(){
0.
}
//---------->
<h1 id="num"></h1>
<script>
//定时器:每隔多少秒,执行一次callback中的代码
//setInterval(callback,time);time十以毫秒为单位的
var count = 0
/* setInterval(function () {
count++
// document.write(count)
num.innerText = count
}, 1000) */
function sum() {
count++
num.innerText = count
if (count > 10) {
//清除定时器
clearInterval(timer)
}
}
var timer = setInterval(sum, 1000)
//延时器:设置一个时间delay,推迟多少秒执行这个代码
//setTimeout(callback,timeout)
setTimeout(function () {
//15秒(15秒从上面的直接就开始算了,并不是上面的执行完后的15秒)之后在添加一个定时器,继续上一次的操作(上面执行的时候这个也在执行,所以实际是5s)
setInterval(sum,100)
},15000)
</script>
```
### 3.性能优化
```js
// 假设当前项目用了100个 setTimeOut
var timesr = [] // 保存所有的setTimeOut 的 id值
var id = setTimeout(function () {
console.log(2);
}, 1000)
timesr.push(id)
for (var i = 0; i < 3; i++) {
var res = setTimeout(function () {
console.log(i) // 3 3 3
}, 5)
timesr.push(res)
}
function foo() {
timesr.push(setTimeout(function () {
}, 10))
}
if (true) {
var res_ = setTimeout(function () {
}, 10)
timesr.push(res_)
}
for (var j = 0; j < 91; j++) {
var id_= setTimeout(function () {
}, 10)
timesr.push(id_)
}
// 找到表示程序结束的点,清空所有 timer
console.log(timesr)
timesr.push(setTimeout(function(){
for(var i = 0;i<timesr.length;i++){
clearTimeout(timesr[i])
console.log(1)
}
},1001))
```