站内搜索:
首页 >> 前端 >> 内容
知乎上解决forclick问题的方法:闭包,同步异步操作,变量作用域

时间:2018/3/28 11:43:12

写出其输出情况

for (var i = 0; i < 5; i++) {
		    setTimeout(function() {
		        console.log(new Date, i);
		    }, 1000);
		}

		console.log(new Date, i);

知乎上解决forclick问题的方法:闭包,同步异步操作,变量作用域

用闭包解决for click

for (var i = 0; i < 5; i++) {
		    (function(i) {  // j = i
		        setTimeout(function() {
		            console.log(new Date, i);
		        }, 1000);
		    })(i);
		}

		console.log(new Date, i);

知乎上解决forclick问题的方法:闭包,同步异步操作,变量作用域

用按值传递解决for click

var output1 = function (i) {
		    setTimeout(function() {
		        console.log(new Date, i);
		    }, 1000);
		};

		for (var i = 0; i < 5; i++) {
		    output1(i);  // 这里传过去的 i 值被复制了
		}

		console.log(new Date, i);

知乎上解决forclick问题的方法:闭包,同步异步操作,变量作用域

es6 promise实现逐秒输出0-5

const tasks = []; // 这里存放异步操作的 Promise
		const output2 = (i) => new Promise((resolve) => {
		    setTimeout(() => {
		        console.log(new Date, i);
		        resolve();
		    }, 1000 * i);
		});

		// 生成全部的异步操作
		for (var i = 0; i < 5; i++) {
		    tasks.push(output2(i));
		}

		// 异步操作完成之后,输出最后的 i
		Promise.all(tasks).then(() => {
		    setTimeout(() => {
		        console.log(new Date, i);
		    }, 1000);
		});

知乎上解决forclick问题的方法:闭包,同步异步操作,变量作用域

es7 async await实现逐秒输出0-5

// 模拟其他语言中的 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);
		})();

  • 上一篇:微信链接重定向之后后退两次才能退出当前页面问题的解决办法
  • 下一篇:qtQGridLayout网格布局addWidget函数与拉伸因子使用介绍
  • 返回顶部