定时器延时器相关

### 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))

```