Ajax请求重复触发求助：getScreenSize仅调用一次却多次请求set_screen_size.php

嘿，这个随机重复请求的问题确实挺闹心的，咱们一步步拆解可能的原因，再对应给出排查和解决办法：

最可能的元凶：窗口resize事件的高频触发 #

你提到getScreenSize()只被调用一次，但大概率是这个函数绑定在了窗口resize事件上——而浏览器在调整窗口尺寸时（比如拖动边缘），会连续触发几十次resize事件，哪怕你只是轻轻拖动一下。这就会导致函数被反复执行，AJAX请求自然也跟着重复发送了。

解决办法：给resize事件加防抖处理 #

防抖能让函数只在窗口停止调整一段时间后才执行，避免高频触发。修改你的代码试试：

// 定义防抖计时器
let resizeDebounceTimer;

function getScreenSize(w, h) {
  // 每次触发时先清除之前的计时器
  clearTimeout(resizeDebounceTimer);
  
  resizeDebounceTimer = setTimeout(() => {
    if (w != $(window).width() || h != $(window).height()) {
      w = $(window).width();
      h = $(window).height();
      $.ajax({
        url:"modules/set_screen_size.php",
        method:"POST",
        data:{ w:w, h:h },
        success:function(data) {
          if (data == "changed") {
            location.reload();
          }
        },
      });
    }
  }, 300); // 300ms延迟，可根据需求调整
}

其他可能的排查方向 #

1. 事件绑定重复 #

虽然你说页面只调用一次函数，但有可能：

• 脚本被重复加载（比如HTML里多次引入同一个JS文件）
• 动态渲染的内容或其他脚本重复绑定了resize事件

排查方式：打开浏览器开发者工具的「Event Listeners」面板，找到resize事件，查看绑定的回调数量，确认是否有重复绑定的情况。

2. 请求未加锁导致并发重复 #

如果函数执行速度快于AJAX请求响应，可能在第一个请求还没完成时，第二个请求就发出去了。可以加一个请求锁来避免：

let isRequestInProgress = false;

function getScreenSize(w, h) {
  // 如果已有请求在进行，直接返回
  if (isRequestInProgress) return;
  
  isRequestInProgress = true;
  
  if (w != $(window).width() || h != $(window).height()) {
    w = $(window).width();
    h = $(window).height();
    $.ajax({
      url:"modules/set_screen_size.php",
      method:"POST",
      data:{ w:w, h:h },
      success:function(data) {
        if (data == "changed") {
          location.reload();
        }
      },
      // 请求完成（无论成功失败）都释放锁
      complete:function() {
        isRequestInProgress = false;
      }
    });
  } else {
    isRequestInProgress = false;
  }
}

3. 页面刷新后的连锁触发 #

你的代码在返回changed时会执行location.reload()，刷新页面后getScreenSize()会再次执行。如果刷新过程中浏览器窗口尺寸发生了微小变化（比如页面加载时滚动条出现/消失），可能会再次触发AJAX请求，形成短暂的循环。

排查方式：可以在刷新前打印当前窗口尺寸，刷新后再对比，看是否有细微变化；或者临时注释掉location.reload()，观察请求是否还会重复。

4. 全局AJAX配置或插件的影响 #

检查是否有全局的AJAX设置（比如$.ajaxSetup()）添加了自动重试逻辑，或者引入了类似jQuery.ajaxRetry这类自动重试的插件，导致请求失败时被重复发送。

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