闭包那些事之例子：定时器

废话不多说，这次直接上干货——

-代码走起

// //源码
for(var i=0;i<5;i++){
  setTimeout(function() {
  console.log(new Date,i)
  }, 1000);
}
console.log(new Date,i);
// // 结果：
// // Mon Mar 20 2017 10:30:56 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 5
        //变形1-1

        //变形2-1
        //期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，
        //并且要求原有的代码块中的循环和两处 console.log 不变，
        //该怎么改造代码？
        for(var i=0;i<5;i++){
            (function(index){
                setTimeout(function(){
                    console.log(new Date,index);
                },1000)
            })(i)
        }
        setTimeout(function(){
            console.log(new Date,i);
        },1000*i)//循环结束后在大概第 5 秒的时候输出 ,只能说大概

        //变形2-2
        //重新思考这个问题，
        //如果把这次的需求抽象为：
        //在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，
        //再做其他的事情，代码该怎么组织？
        //对，就是 Promise。
        const tasks = [];
        for (var i = 0; i < 5; i++) {
            ((j) => {
                tasks.push(new Promise((resolve) => {
                    setTimeout(() => {
                        console.log(new Date, j);
                        resolve();// 这里一定要 resolve，否则代码不会按预期 work
                    }, 1000 * j); // 定时器的超时时间逐步增加
                }));
            })(i);
        }

        Promise.all(tasks).then(() => {
            setTimeout(() => {
                console.log(new Date, i);
            }, 1000);   // 注意这里只需要把超时设置为 1 秒
        });

        //变形2-3
        //努力使代码阅读时的颗粒度更小，模块化更好
        const tasks = []; // 这里存放异步操作的 Promise
        const output = (i) => new Promise((resolve) => {
            setTimeout(() => {
                console.log(new Date, i);
                resolve();
            }, 1000 * i);
        });

        // 生成全部的异步操作
        for (var i = 0; i < 5; i++) {
            tasks.push(output(i));
        }
        // 异步操作完成之后，输出最后的 i
        Promise.all(tasks).then(() => {
            setTimeout(() => {
                console.log(new Date, i);
            }, 1000);
        });
        //注意：
        //使用 Promise 处理异步代码比回调机制让代码可读性更高，
        //但是使用 Promise 的问题也很明显，
        //即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，
        //好在新版的 Chrome 和 Node 7.x 能对未处理的异常
        //给出 Unhandled Rejection Warning，
        //而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。

        //变形2-4
        //既然 Promise 已经被拿下，
        //如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？
        // 模拟其他语言中的 sleep，实际上可以是任何异步操作
        const sleep = (timeountMS) => new Promise((resolve) => {
            setTimeout(resolve, timeountMS);
        });

        (async () => {  // 声明即执行的 async 函数表达式
            for (var i = 0; i < 5; i++) {
                await sleep(1000);
                console.log(new Date, i);
            }
            await sleep(1000);
            console.log(new Date, i);
        })();

今天为大家分享闭包里定时器的小例子，感谢各位观看，互相学习，一起进步。持续更新中......