Javascript批量点击动态加载页面按钮致浏览器标签页挂死如何解决

问题描述 #

我想要编写一段Javascript代码，用于点击teamblind站点讨论帖中的所有按钮，无需手动点击展开即可查看全部评论。
我发现可以通过在控制台执行如下代码实现按钮点击：

var bs = document.getElementsByClassName('btn_more');
bs[0].click(); 

只需重复执行bs[0].click()直到仅剩1个元素即可，但当我将逻辑改写为如下while循环时：

function clickall() {
var bs = document.getElementsByClassName('btn_more');
while (bs.length > 1 ) { // 1是因为最后1个按钮会跳转至其他页面，其余按钮均用于展开当前帖子内容
bs[0].click(); 
}
  return;
}

在Web控制台运行该函数后浏览器标签页直接停止响应，我只能通过任务管理器关闭浏览器进程终止该函数运行。
我猜测是页面为动态加载，可能需要等待页面完成展开操作？有人知道运行该函数导致标签页挂死的原因是什么，以及应该如何修复该问题吗？
编辑补充：点击按钮会减小bs的长度

标签页挂死的原因 #

• document.getElementsByClassName返回的是实时HTML集合，DOM树更新时集合内容会自动同步，但点击展开按钮后评论是异步加载的，加载完成前对应按钮不会被移除，bs.length不会立刻变化。
• while循环为同步执行逻辑，会在极短时间内无限触发同一个按钮的点击事件，完全占用JS主线程，浏览器没有空闲资源处理网络请求、DOM更新等任务，最终导致页面无响应。

修复方案 #

采用异步递归的方式，每次点击后等待内容加载完成再执行下一次操作，避免阻塞主线程，可直接在控制台运行以下代码：

function clickAllExpandBtns() {
  // 每次重新获取最新的按钮列表，规避实时集合的副作用
  const btnList = document.querySelectorAll('.btn_more');
  // 仅剩1个跳转按钮时终止执行
  if (btnList.length <= 1) return;
  btnList[0].click();
  // 等待1秒（可根据你的网络情况调整时长）后执行下一轮点击
  setTimeout(clickAllExpandBtns, 1000);
}
clickAllExpandBtns();

如果需要更精准的触发时机，可以使用MutationObserver监听评论区域的DOM变动，内容加载完成后自动触发下一次点击，无需固定延时等待。

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