如何用jQuery点击加载更多按钮直到目标元素可见？

你的问题核心是同步循环和异步AJAX的冲突：do-while是同步执行逻辑，会瞬间触发无数次按钮点击，完全不等AJAX请求完成就继续循环，直接导致浏览器资源耗尽崩溃。AJAX是异步操作，必须等待请求完成、DOM更新后，才能判断是否需要继续加载。

下面是两种可行的实现方案：

方式一：递归+全局AJAX完成监听 #

如果无法修改原按钮的AJAX逻辑，可以利用jQuery的ajaxComplete全局事件，每次AJAX请求完成后再检查目标元素：

function loadUntilElementExists() {
  // 先检查目标元素是否已存在
  if ($('.new-element').length > 0) {
    return; // 找到元素，停止递归
  }

  // 检查加载按钮状态：如果按钮隐藏/禁用，说明没有更多内容
  const loadBtn = $('.button-load-more');
  if (!loadBtn.is(':visible') || loadBtn.is(':disabled')) {
    console.log('无更多内容可加载，目标元素未找到');
    return;
  }

  // 触发加载按钮点击
  loadBtn.click();

  // 等待本次AJAX完成后，再递归执行检查
  $(document).one('ajaxComplete', function() {
    // 加100ms延迟确保DOM元素渲染完成
    setTimeout(() => loadUntilElementExists(), 100);
  });
}

// 启动自动加载逻辑
loadUntilElementExists();

方式二：基于Promise的async/await实现（推荐，需修改按钮逻辑） #

如果能控制加载按钮的点击事件，让它返回Promise，就能用更清晰的async/await写法：

// 先改造按钮的点击事件，让它返回AJAX的Promise
$('.button-load-more').on('click', function() {
  const $btn = $(this);
  // 如果按钮已禁用，直接返回空Promise
  if ($btn.is(':disabled')) return Promise.resolve();

  $btn.prop('disabled', true);
  // 发起AJAX请求
  return $.ajax({
    url: '/your-load-more-api', // 替换为实际接口地址
    method: 'GET'
  }).done(function(data) {
    // 将返回的内容添加到页面容器
    $('.content-wrapper').append(data);
  }).always(function() {
    $btn.prop('disabled', false);
    // 如果接口返回无更多内容，隐藏按钮
    if (/* 这里判断是否还有更多内容 */) {
      $btn.hide();
    }
  });
});

// 自动加载函数
async function autoLoadUntilElement() {
  while (true) {
    const $target = $('.new-element');
    // 找到目标元素则停止循环
    if ($target.length > 0) break;

    const $btn = $('.button-load-more');
    // 按钮不可用则终止
    if (!$btn.is(':visible') || $btn.is(':disabled')) {
      console.log('无法继续加载，目标元素未找到');
      break;
    }

    // 等待本次AJAX请求完成
    await $btn.click();
    // 延迟确保DOM更新完成
    await new Promise(resolve => setTimeout(resolve, 100));
  }
}

// 启动自动加载
autoLoadUntilElement();

关键注意点 #

• 必须判断加载按钮的状态：避免按钮已无更多内容时，陷入无限循环。
• 加入小延迟：确保AJAX返回的DOM元素完全渲染后再进行判断，避免误判。
• 全局ajaxComplete会监听所有AJAX请求，如果页面有其他无关AJAX操作，可添加请求URL的判断，避免误触发递归。

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