关于for循环里面异步操作的问题

坚强是说给别人听的谎言 提交于 2020-03-06 14:57:32

https://www.cnblogs.com/vipzhou/p/6519552.html

 

关于for循环里面异步操作的问题

 

首先来看一个比较简单的问题,我们想实现的就是每隔1s输出0-4的值,就是这么简单,看下错误写法:

1
2
3
4
5
6
7
8
function test() {
    for (var i = 0; i < 5; ++i) {
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000);
    }
}
test();

以上代码会如何输出?输出如下:

1
2
3
4
5
index is : 5
index is : 5
index is : 5
index is : 5
index is : 5

而且该操作几乎是在同一时间完成,setTimeout定时根本就没有起作用,这是因为:单线程的js在操作时,对于这种异步操作,会先进行一次“保存”,等到整个for循环执行结束后,此时i的值已经变成5,因为setTimeout是写在for循环中的,相当于存在5次定时调用,这5次调用均是在for循环结束后进行的,所以自然而然输出都是5,正确的实现有几种,一般情况下,我们使用递归实现,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// var i = 0;
// var arr = [0, 1, 2, 3, 4];
 
// function box6() {
//     if (i < arr.length) {
//         setTimeout(function() {
//             console.log("index is : ", i);
//             i++;
//             box6();
//         }, 1000);
//     }
// }
 
box6();
 
function box7(param) {
    if (param < 5) {
        console.log("index is :", param);
        setTimeout(function() {
            box7(param + 1);
        }, 1000)
    }
}
box7(0);

正确实现每隔1s打印输出如下:

1
2
3
4
5
index is : 0
index is : 1
index is : 2
index is : 3
index is : 4

使用递归实现的倒计时:

1
2
3
4
5
6
7
8
9
10
11
12
13
function showTime(count) {
    console.log("count is : ", count);
    if (count == 0) {
        console.log("All is Done!");
    else {
        count -= 1;
        setTimeout(function() {
            showTime(count);
        }, 1000);
    }
}
 
showTime(20);

递归调用很好的解决了setTimeout同时执行的情况,如果使用async、await实现,可以如下写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var asyncFunc = function(arr, i) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            arr.push(i);
            console.log("index is : ", i);
            resolve();
        }, 1000);
    });
}
 
var box5 = async function() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        await asyncFunc(arr, i);
    }
    console.log(arr);
}
 
box5();

同样实现每隔1s正确地打印输出如下:

1
2
3
4
5
6
index is :  0
index is :  1
index is :  2
index is :  3
index is :  4
[ 0, 1, 2, 3, 4 ]

接下来再看个需求:构建一个函数数组,该数组每一项函数的功能是依次输出0-4,错误写法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        result.push(function() { console.log(item + ' ' + list[i]) });
    }
    return result;
}
 
function testList() {
    var fnlist = buildList([1, 2, 3]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 
testList();

输出如下:

1
2
3
item3 undefined
item3 undefined
item3 undefined

for循环里面使用匿名函数和直接写setTimeout调用比较类似,但是这里又有点不同,for循环执行结束后,匿名函数开始调用,发现里面存在“item”变量,这时依次会向上级查找,恰好找到循环结束时的item变量值为“list[2]”即为3,item为3但是i的值已经变为3,又因为list[3]的值为undefined,所以这里输出3遍item3 undefined。不信可以修改下数组如下,其余代码不变:

1
2
3
4
5
6
7
8
9
10
function buildList(list) {
    ...
}
 
function testList() {
    var fnlist = buildList([6, 7, 8]);
    ...
}
 
testList();

这里绝对输出的是:

1
2
3
item8 undefined
item8 undefined
item8 undefined

再来看下正确的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        result.push(function(index, it) {
            return function() {
                console.log(it + ' ' + list[index]);
            }
        }(i, item));
    }
    return result;
}
 
function testList() {
    var fnlist = buildList([6, 7, 8]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 
testList();

输出如下:

1
2
3
item6 6
item7 7
item8 8

这里主要使用的是即时执行函数,什么是即时执行函数?可以理解为一个封闭的代码块,该代码块中的代码会在定义时立即执行一遍,各个代码块的作用域彼此独立,不会污染外部环境,写法其实有很多种,上面只是一种,同样的还有使用void、+、-、!等等,jquery源码就是直接使用的这里的圆括号写法的这种。

再看几个测试例子:

1
2
3
4
5
6
7
8
9
10
function box2() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) { //自我执行,并传参(将匿名函数形成一个表达式)(传递一个参数)
            return num; //这里的num写什么都可以                   
        })(i); //这时候这个括号里面的i和上面arr[i]的值是一样的都是取自for循环里面的i                           
    }
    return arr;
}
console.log(box2());     //[ 0, 1, 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12
function box4() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) { //自我执行,并传参(将匿名函数形成一个表达式)(传递一个参数),在这个闭包里面再写一个匿名函数
            return function() {
                return num;
            }
        })(i); //这时候这个括号里面的i和上面arr[i]的值是一样的都是取自for循环里面的i                     
    }
    return arr;
}
console.log(box4());   //[ [Function], [Function], [Function], [Function], [Function] ]

box4这种写法其实跟上面有一种是一致的,就不多说了,其实主要就是闭包,稍微改变一下代码,实现的结果却截然不同,共勉吧。。。

 

首先来看一个比较简单的问题,我们想实现的就是每隔1s输出0-4的值,就是这么简单,看下错误写法:

1
2
3
4
5
6
7
8
function test() {
    for (var i = 0; i < 5; ++i) {
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000);
    }
}
test();

以上代码会如何输出?输出如下:

1
2
3
4
5
index is : 5
index is : 5
index is : 5
index is : 5
index is : 5

而且该操作几乎是在同一时间完成,setTimeout定时根本就没有起作用,这是因为:单线程的js在操作时,对于这种异步操作,会先进行一次“保存”,等到整个for循环执行结束后,此时i的值已经变成5,因为setTimeout是写在for循环中的,相当于存在5次定时调用,这5次调用均是在for循环结束后进行的,所以自然而然输出都是5,正确的实现有几种,一般情况下,我们使用递归实现,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// var i = 0;
// var arr = [0, 1, 2, 3, 4];
 
// function box6() {
//     if (i < arr.length) {
//         setTimeout(function() {
//             console.log("index is : ", i);
//             i++;
//             box6();
//         }, 1000);
//     }
// }
 
box6();
 
function box7(param) {
    if (param < 5) {
        console.log("index is :", param);
        setTimeout(function() {
            box7(param + 1);
        }, 1000)
    }
}
box7(0);

正确实现每隔1s打印输出如下:

1
2
3
4
5
index is : 0
index is : 1
index is : 2
index is : 3
index is : 4

使用递归实现的倒计时:

1
2
3
4
5
6
7
8
9
10
11
12
13
function showTime(count) {
    console.log("count is : ", count);
    if (count == 0) {
        console.log("All is Done!");
    else {
        count -= 1;
        setTimeout(function() {
            showTime(count);
        }, 1000);
    }
}
 
showTime(20);

递归调用很好的解决了setTimeout同时执行的情况,如果使用async、await实现,可以如下写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var asyncFunc = function(arr, i) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            arr.push(i);
            console.log("index is : ", i);
            resolve();
        }, 1000);
    });
}
 
var box5 = async function() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        await asyncFunc(arr, i);
    }
    console.log(arr);
}
 
box5();

同样实现每隔1s正确地打印输出如下:

1
2
3
4
5
6
index is :  0
index is :  1
index is :  2
index is :  3
index is :  4
[ 0, 1, 2, 3, 4 ]

接下来再看个需求:构建一个函数数组,该数组每一项函数的功能是依次输出0-4,错误写法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        result.push(function() { console.log(item + ' ' + list[i]) });
    }
    return result;
}
 
function testList() {
    var fnlist = buildList([1, 2, 3]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 
testList();

输出如下:

1
2
3
item3 undefined
item3 undefined
item3 undefined

for循环里面使用匿名函数和直接写setTimeout调用比较类似,但是这里又有点不同,for循环执行结束后,匿名函数开始调用,发现里面存在“item”变量,这时依次会向上级查找,恰好找到循环结束时的item变量值为“list[2]”即为3,item为3但是i的值已经变为3,又因为list[3]的值为undefined,所以这里输出3遍item3 undefined。不信可以修改下数组如下,其余代码不变:

1
2
3
4
5
6
7
8
9
10
function buildList(list) {
    ...
}
 
function testList() {
    var fnlist = buildList([6, 7, 8]);
    ...
}
 
testList();

这里绝对输出的是:

1
2
3
item8 undefined
item8 undefined
item8 undefined

再来看下正确的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        result.push(function(index, it) {
            return function() {
                console.log(it + ' ' + list[index]);
            }
        }(i, item));
    }
    return result;
}
 
function testList() {
    var fnlist = buildList([6, 7, 8]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 
testList();

输出如下:

1
2
3
item6 6
item7 7
item8 8

这里主要使用的是即时执行函数,什么是即时执行函数?可以理解为一个封闭的代码块,该代码块中的代码会在定义时立即执行一遍,各个代码块的作用域彼此独立,不会污染外部环境,写法其实有很多种,上面只是一种,同样的还有使用void、+、-、!等等,jquery源码就是直接使用的这里的圆括号写法的这种。

再看几个测试例子:

1
2
3
4
5
6
7
8
9
10
function box2() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) { //自我执行,并传参(将匿名函数形成一个表达式)(传递一个参数)
            return num; //这里的num写什么都可以                   
        })(i); //这时候这个括号里面的i和上面arr[i]的值是一样的都是取自for循环里面的i                           
    }
    return arr;
}
console.log(box2());     //[ 0, 1, 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12
function box4() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) { //自我执行,并传参(将匿名函数形成一个表达式)(传递一个参数),在这个闭包里面再写一个匿名函数
            return function() {
                return num;
            }
        })(i); //这时候这个括号里面的i和上面arr[i]的值是一样的都是取自for循环里面的i                     
    }
    return arr;
}
console.log(box4());   //[ [Function], [Function], [Function], [Function], [Function] ]

box4这种写法其实跟上面有一种是一致的,就不多说了,其实主要就是闭包,稍微改变一下代码,实现的结果却截然不同,共勉吧。。。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!