JavaScript冻结了浏览器

Question

我正在尝试创建一个为HTML类使用生成重复的css属性的函数。该功能分三步进行。

1. 用以下内容创建对象：

    var obj = new module('prefix', 'suffix');

2. 添加几个属性：

    obj.addProperty('width', 'px', 2);
    obj.addProperty('height', 'px', 2);

3. 运行克隆过程：

    obj.clone('15', '3');

但是，它没有明显的原因冻结。这是完整的代码：

window.cloner_module = function(prefix, suffix) {
    this.properties = []
    this.prefix = prefix;
    this.suffix = suffix;

    this.addProperty = function(option, type, side) {
        var array = [];
        array.push(option, type, side);
        this.properties.push(array);
    }

    this.clone = function(max, step) {

        var array = [];
        var entry_count = 0;
        var innerModuleArray = [];
        var moduleArray = [];
        var property;
        var option;
        var type;
        var side;
        var value;
        var string = "";


        for (var i = 0; i < max; i + step) {
            innerModuleArray = [];
            moduleArray = [];
            moduleArray.push('.' + prefix + i + suffix + '{');

            for (var y = 0; y < this.properties.length; y++) {
                property = this.properties[y];
                option = property[0];
                type = property[1];
                side = property[2];
                value;

                if (!side) {
                    value = i;
                } else if (side == '1') {
                    value = type + i;
                } else if (side == '2') {
                    value = i + type;
                } else {
                    console.log('"Side" property must be between 0 and 2');
                }

                string = option + ": " + value + "; ";
                innerModuleArray.push(string);
            }

            moduleArray.push(innerModuleArray);
            moduleArray.push('}');
            array.push(moduleArray);
            entry_count++;
        }

        this.clones = array;
        this.last_entry_count = entry_count;
        this.last_step_registered = step; 
        this.last_max_registered = max;
    }
}

Answer 1

由于你的for循环，你的代码进入了一个无限循环，这反过来导致浏览器冻结。核心问题是这条线：

for (var i = 0; i < max; i + step)

这里的最终语句总是等于3（0 + 3），所以循环永远不会完成。您可能希望将其更改为：

for (var i = 0; i < max; i += step)

这个编辑将通过i每次迭代不断增加step，就像你的初衷一样。