LinMinquan's Blog

Experience technology to change life

javascript – don’t make functions within a loop

有一次提交project时,被提示 don’t make functions with a loop ,查了些资料后才明白。

function count(max) {
    for(var i=0; i< max; i += 1) {
        console.log(i+1);
    }
}

count(10);

上面的代码可以正常输入 1 到 10 。

function count(max) {
    for(var i=0; i< max; i += 1) {
        setTimeout(function() {
            console.log(i+1);            
        }, 1000);
    }
}

count(10);

但上面的代码就会输出10个11 。

当看到输出结果时,想想就明白原因了,因为等到 1 秒后再去输出时,i 的值已经变成 10 了。

function count(max) {
    for(var i=0; i< max; i += 1) {
        printLater(i+1);    
    }
}

function printLater(output) {
    setTimeout(function() {
        console.log(i+1);            
    }, 1000);
}

count(10);

就因为容易出现这样的问题,所以不能在 loop 里 make functions 。

参考链接:https://www.youtube.com/watch?v=Nqfs14iu_us

=======20180420更新========

MDN中讲闭包时也有提到这个问题:在循环中创建闭包:一个常见错误

链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures


Share