如何通过窗口大小调整用JavaScript/jQuery激活和停用脚本？

你的思路方向是对的，但原方案存在两个核心问题导致未达预期：一是只在页面首次加载时判断一次宽度，窗口大小改变后不会重新触发逻辑；二是没有处理脚本重复加载的问题（比如用户反复调整窗口尺寸，可能会多次调用$.getScript）。下面是修复后的完整解决方案：

步骤1：封装判断与加载逻辑，避免重复加载 #

先创建一个专用函数，负责检查窗口宽度，同时确保脚本只被加载一次：

// 标记脚本是否已加载，避免重复请求
let myScriptLoaded = false;

function checkAndLoadScript() {
  const windowWidth = $(window).width();
  // 窗口宽度达标且脚本未加载时，执行加载
  if (windowWidth >= 960 && !myScriptLoaded) {
    $.getScript('myscript.js')
      .done(function() {
        myScriptLoaded = true;
        console.log('myscript.js 加载成功');
        // 如果脚本需要初始化逻辑，可在此调用，比如：
        // initMyScript();
      })
      .fail(function(jqxhr, settings, exception) {
        console.error('脚本加载失败:', exception);
      });
  } else if (windowWidth < 960 && myScriptLoaded) {
    // 可选：如果需要在窗口缩小时销毁脚本效果，可在此处理
    // 比如移除绑定的事件、销毁实例等
    // destroyMyScript();
    // myScriptLoaded = false; // 若需要下次窗口放大时重新加载，可重置标记
  }
}

步骤2：初始化与监听窗口 resize #

接下来要在页面加载时执行一次判断，同时监听窗口尺寸变化（加入防抖优化，避免频繁触发）：

$(document).ready(function() {
  // 页面加载完成后先执行一次判断
  checkAndLoadScript();

  // 监听窗口resize事件，加防抖减少性能消耗
  let resizeTimeout;
  $(window).on('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(checkAndLoadScript, 250);
  });
});

原方案失效的原因拆解 #

• 原代码仅在页面加载时运行一次，若用户先缩小窗口再加载页面，之后放大窗口，脚本不会自动触发加载；
• 缺少脚本加载失败的错误捕获，你可能无法及时发现加载异常；
• 没有重复加载防护，多次触发判断会重复请求脚本资源。

额外优化提示 #

• 如果myscript.js依赖DOM元素，确保脚本加载时目标元素已存在（可将判断逻辑放在$(document).ready内，或在$.getScript的done回调中执行脚本初始化）；
• 若需要更精确的视口宽度判断，可根据需求替换为$(window).outerWidth()（包含滚动条）或document.documentElement.clientWidth（不含滚动条的纯视口宽度）。

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