- 首页 > it技术 > >
闭包的那些事--闭包+定时器小例子
// //源码
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
for(var i=0;
i<5;
i++){
(function(index){
setTimeout(function(){
console.log(new Date,index);
},1000)
})(i)
}
console.log(new Date,i);
// //结果：
// // Mon Mar 20 2017 10:30:56 GMT+0800 (中国标准时间) 5
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 0
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 1
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 2
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 3
// // Mon Mar 20 2017 10:30:57 GMT+0800 (中国标准时间) 4//变形1-2
//定义一个帮助函数，利用 JS 中基本类型（Primitive Type）的参数传递是
//按值传递（Pass by Value）的特征；
//这样的做法显然是更符合直觉的
var helper=function(index){
setTimeout(function(){
console.log(new Date,index);
},1000)
};
for(var i=0;
i<5;
i++){
helper(i);
// 这里传过去的 i 值被复制了
}
console.log(new Date,i);
for(var i=0;
i<5;
i++){
var helper=function(index){
setTimeout(function(){
console.log(new Date,index);
},1000)
};
helper(i);
// 这里传过去的 i 值被复制了
}
console.log(new Date,i);
//变形1-3
//这里只有个非常细微的变动，即使用 ES6 块级作用域（Block Scope）中的 let 替代了 var，
//但是代码在实际运行时会报错，
//因为最后那个输出使用的 i ,
//在其所在的作用域中并不存在，i 只存在于循环内部。
for(let i=0;
i<5;
i++){
setTimeout(function(){
console.log(new Date,i);
},1000)
}
console.log(new Date,i);
//最后输出使用的 i 不存在,会报错
//结果：
//Uncaught ReferenceError: i is not defined at....
//Mon Mar 20 2017 10:48:09 GMT+0800 (中国标准时间) 0
//Mon Mar 20 2017 10:48:09 GMT+0800 (中国标准时间) 1
//Mon Mar 20 2017 10:48:09 GMT+0800 (中国标准时间) 2
//Mon Mar 20 2017 10:48:09 GMT+0800 (中国标准时间) 3
//Mon Mar 20 2017 10:48:09 GMT+0800 (中国标准时间) 4
//变形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);
})();
推荐阅读
