浏览器 resize 时如何终止上一次 myfunc 调用，仅保留最新调用弹窗？

嘿，这个场景太常见了！你遇到的问题本质是高频事件触发导致重复执行函数，最靠谱的解决方案就是用**防抖（Debounce）**技术——它能让函数只在用户停止调整窗口（也就是最后一次触发resize事件）后的指定延迟时间内执行，期间如果再次触发事件，就直接取消上一次的待执行任务，重新计时。

具体实现方法 #

首先我们需要一个通用的防抖工具函数，它会帮我们管理定时器，自动取消上一次的函数调用：

function debounce(func, delay = 300) {
  let timeoutId; // 用来存储定时器ID
  return function(...args) {
    // 每次触发事件时，先清除上一次的定时器，终止待执行的函数
    clearTimeout(timeoutId);
    // 重新设置新的定时器，只有最后一次触发会在延迟后执行目标函数
    timeoutId = setTimeout(() => {
      func.apply(this, args); // 保留原函数的this指向和传入参数
    }, delay);
  };
}

接下来把你的myfunc用这个防抖函数包装，再绑定到resize事件上：

// 假设这是你的原函数
function myfunc() {
  // 这里写你的弹窗逻辑或元素修改代码
  console.log("执行resize后的操作");
}

// 用防抖包装函数，延迟时间可以按需调整（比如200ms）
const debouncedMyFunc = debounce(myfunc, 200);

// 绑定到窗口的resize事件
window.addEventListener('resize', debouncedMyFunc);

原理说明 #

• 每次用户拖动窗口调整大小时，resize事件会频繁触发，但每次触发都会先清除之前的定时器，相当于把上一次还没执行的myfunc给“取消”了。
• 只有当用户停止调整窗口超过你设置的延迟时间（比如200ms），最后一次设置的定时器才会到期，真正执行myfunc。这样就完美实现了“只保留最后一次调用”的需求。

可选：立即执行第一次调用的版本 #

如果你希望第一次调整窗口时立刻执行函数，之后再进入防抖逻辑，可以用这个“立即执行版”的防抖函数：

function debounceImmediate(func, delay = 300) {
  let timeoutId;
  let shouldExecuteImmediately = true;
  
  return function(...args) {
    clearTimeout(timeoutId);
    
    if (shouldExecuteImmediately) {
      func.apply(this, args);
      shouldExecuteImmediately = false;
    }
    
    timeoutId = setTimeout(() => {
      shouldExecuteImmediately = true; // 重置状态，下次停止调整后可再次立即执行
    }, delay);
  };
}

这样第一次调整窗口时会马上触发myfunc，之后连续调整的话，就只会在停止后执行最后一次调用。

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