web开发问题总结

js语言：

1、在开发过程中遇到一个for循环中自增／自减变量的问题。
代码1：

function main(){
    for(var i=0; i<10; i++){
        setInterval(function(){
            updateView(i);
        }, 1000);
    }
}

function updateView(index){
    console.log(index);
}

运行代码1中的main()函数，输出的结果是：每隔一秒输出10个10。
然而我们的目标是每隔1秒输出0 1 2 3 4 5 6 7 8 9。
修正方法见代码2。
代码2：

var array = [];
function main(){
    for(var i=0; i<10; i++){
        array.push(i);
        setInterval(function(){
            updateView();
        }, 1000);
    }
}

function updateView(){
    for(var i=0; i<array.length; i++){
        var value = array.shift();
        console.log(value);
        array.push(value);
    }
}

基本思想将下标push到数组中，然后遍历数组。代码1中的问题js中var作用域的问题，在es6中可以使用let代替var。

利用匿名函数+Function.prototype.call解决
代码3：

var array=[
{value: 2},
{value: 3},
{value: 1}
];
//数组中每个value自减，直至为0
for(var i=0 ; i<array.length; i++){
    (function (index){
        var self = this;
        self.index = index;
        self.timer = setInterval(function(){
            if(self.value < 0) {
                clearInterval(self.timer);
                self = null; //避免内存泄漏
            }
            else{
                console.log(self.index + ':' + self.value + '<br>');
                self.value = self.value - 1;
            }
        }, 500);
    }).call(array[i], i);
}

Function.prototype.call方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。代码3是将array中的元素作为this指针，避免了js var声明变量的作用域问题；同时利用js匿名函数的闭包特性，实现了数组中元素的自减。
Function.prototype.call的参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call