AJAX成功跳转页面后，后续JS函数未等待页面加载执行的问题求助

核心问题在于：当设置window.location.href跳转页面时，当前页面的JavaScript上下文会被浏览器立即卸载，后续的代码（包括await、delay里的逻辑）都是在原页面执行，根本等不到目标页面加载完成——甚至原页面的代码执行到跳转后，浏览器会很快销毁当前页面，所以你看到日志先输出，之后页面才完成跳转。

你之前尝试的async/await和.then之所以无效，是因为redirectEvent函数里的window.location.href是同步执行的跳转操作，这个函数并没有返回一个能等待页面加载完成的Promise，await它根本起不到等待的作用。

正确的解决方案 #

方案1：直接在目标页面加载时执行样式处理函数 #

这是最直接的方式，把处理CSS样式的逻辑放在目标页面（/event/{event_id}）的JavaScript中，监听页面加载完成事件：

// 目标页面的JS代码
document.addEventListener('DOMContentLoaded', function() {
  // 这里编写处理页面元素CSS样式的逻辑
  console.log('页面加载完成，开始处理样式');
  // 示例：修改某个元素的样式
  document.getElementById('event-card').style.backgroundColor = '#f0f8ff';
});

方案2：通过URL参数传递状态（如果需要区分是否是邀请成功后的跳转） #

如果只有在AJAX邀请成功后才需要执行样式处理，可以在跳转时通过URL参数标记状态，目标页面读取参数后再执行逻辑：

原页面修改跳转逻辑：

function redirectEvent(event_id) {
  // 添加邀请成功的标记参数
  window.location.href = `/event/${event_id}?inviteSuccess=1`;
}

// AJAX函数修改（保留核心逻辑即可）
function inviteEventAttendee(event_id, user_id) {
  $.ajax({
    method: "POST",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    url: "{{ route('inviteEventAttendee') }}",
    data: { event_id: event_id, user_id: user_id },
    success: function (response) {
      // 直接跳转，不需要await
      redirectEvent(event_id);
    }
  });
}

目标页面读取参数并执行逻辑：

// 目标页面的JS代码
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const isInviteSuccess = urlParams.get('inviteSuccess');
  
  if (isInviteSuccess === '1') {
    // 执行样式处理函数
    handleEventStyles();
  }
});

function handleEventStyles() {
  // 处理CSS样式的具体逻辑
  console.log('邀请成功，处理页面样式');
  // 示例：添加类名
  document.querySelector('.event-attendees').classList.add('invite-success');
}

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