按钮触发的JavaScript代码添加行后页面冻结问题排查

先看你给出的原代码和遇到的问题——按钮点击后页面冻结，大概率是触发了无限循环，我帮你拆解下问题所在：

原代码的核心问题 #

var key = ''; var c = 22; var size = data[7].length; for(var t = 22; t < size; ++t){ while(!(data[7][c] === "<")){ key += data[7][c]; ++c; } }

这里有两个致命的逻辑漏洞：

1. 外层for循环完全多余：循环变量t在整个循环体里根本没被使用，它不会影响内部的while循环，反而会让代码逻辑变得混乱。
2. while循环没有边界防护：当c递增到超过data[7].length时，data[7][c]会变成undefined，而undefined === "<"永远是false，所以while循环会一直执行下去，直接导致页面线程卡死。

结合你提供的数据<span class="keyword">casa</span>来看，如果添加的代码不小心修改了data[7]的内容（比如把末尾的</span>删掉了），或者改变了c的初始值，都会让while循环找不到终止的<，进而触发无限循环。

修复后的代码 #

我把冗余的for循环去掉，同时给while循环加上边界判断，确保不会越界：

var key = ''; 
var c = 22; 
var size = data[7].length; 

// 直接用带边界判断的while循环
while (c < size && data[7][c] !== "<") {
    key += data[7][c];
    ++c;
}

额外调试建议 #

如果之后还出现类似问题，可以在循环里加个日志输出，方便定位问题：

while (c < size && data[7][c] !== "<") {
    console.log('当前c值:', c, '当前字符:', data[7][c]);
    key += data[7][c];
    ++c;
}

这样就能清楚看到循环什么时候开始异常，或者data[7]的内容是否符合预期。

内容的提问来源于stack exchange，提问作者polcompany