followme/asyncProblem.html at master · franckchen/followme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>异步问题</title>
</head>
<body>
<script>
    /**
     * 有一个需求很简单。。。延迟1s后，打印出0-4，这5个数字
     * 你的代码可能是像下面这样写的
     */
    var i;
    var len;
    for (i = 0, len = 5; i < len; i++) {
        /**
         * setTimeout,是js中的计时函数，1秒后，执行参数中的匿名函数,打印数字
         */
        setTimeout(
            function () {
                console.log(i);
            },
            1000
        );
    }

    /**
     * 代码运行结果似乎不是预期的。。。打印出了5个5...这就是典型的js异步问题
     * 可以这么理解: for循环很快就完成了，i的值瞬间因为++的作用而变成了5,所以1秒后
     * 再打印i，那么得到的自然是当时的i的值也就是5，所以输出了5个5，怎么解决呢？看下面的代码
     */
    for (i = 0, len = 5; i < len; i++) {
        (function (i) {
            setTimeout(
                function () {
                    console.log(i);
                },
                1000
            );
        })(i);
    }
    /**
     * 参数i作为实参拷贝传入到了函数体内，在函数作用域内i的值是循环过程中正确的i值，而这个i值在函数作用域
     * 内会长久保持，所以匿名函数中的i已经不是用于循环计数的那个i了，相当于是一个拷贝，自然不受计数的那个i递增的影响了，那么自然1秒后能够正确的打印
     * 出我们需要的值
     * 很多人都说这东西是闭包，只能他们对于闭包的理解还不够透彻，不要轻信
     * 这是js异步问题最简单也是最直观的例子，以后在补充~~
     */
</script>
</body>
</html>