莫名奇妙线上问题

date
Jan 20, 2023
slug
onlone
status
Published
tags
issues
summary
一些莫名奇妙线上问题
type
Post

线上问题：Can't find variable: requestIdleCallback

Safari 目前不支持 requestIdleCallback API。这个 API 主要在 Chrome、Firefox 和 Edge 等现代浏览器中得到支持。
对于 Safari，我们通常需要使用 polyfill 或替代方案：
// requestIdleCallback polyfill
window.requestIdleCallback = window.requestIdleCallback || function(handler) {
  let startTime = Date.now();
  
  return setTimeout(function() {
    handler({
      didTimeout: false,
      timeRemaining: function() {
        return Math.max(0, 50.0 - (Date.now() - startTime));
      }
    });
  }, 1);
};
替代方案包括：
  • 使用 setTimeout 或 requestAnimationFrame 作为降级方案
  • 使用第三方库如 idle-callback-polyfill
  • 根据具体场景选择其他异步调度方案
 

线上问题： window.open()在 async函数中被 Safair浏览器拦截

在 React 的 onClick 事件处理中，window.open() 可能在以下情况下被 Safari 浏览器拦截：
  • 异步调用：如果 window.open() 在异步回调（如 setTimeout、Promise）中执行
  • 非直接用户交互：不是直接由用户点击事件触发，而是通过其他程序逻辑触发
  • 多层嵌套调用：window.open() 在多层函数调用链中执行
解决方案：
// 推荐做法：直接在点击事件中调用
const handleClick = () => {
  window.open('https://example.com', '_blank');
}

// 不推荐：异步调用
const handleClickAsync = () => {
  setTimeout(() => {
    window.open('https://example.com', '_blank'); // 可能被拦截
  }, 100);
}
最佳实践：
  • 确保 window.open() 直接在用户点击事件处理函数中同步调用
  • 如果必须异步调用，可以先存储 window.open() 返回的窗口引用
  • 考虑使用 <a> 标签配合 target="_blank" 作为替代方案

© yujun 2021 - 2025