JavaScript 卡住浏览器

Question

我正在尝试创建一个函数来生成重复的 css 属性以供 HTML 类使用。该函数分三个步骤运行。

1. 使用以下内容创建对象:

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

添加几个属性:

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

运行克隆过程:

    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，这正是您的初衷。