iOS中事件监听器内异步函数无法正确传递参数问题

我有一段代码，希望通过异步方式处理自定义事件，但在 iOS 设备上运行异常——控制台提示inititeFunction中的data为undefined。

原代码如下：

document.addEventListener('customEvent', async (data) => {

    try {
        console.log('before function:', data);
        await inititeFunction(data);
    } catch (err) {
        console.error('function failed:', err);
    };
});

async function inititeFunction (data) {
    console.log('inside function:', data);
}

这段代码在桌面端及 Android 设备上运行正常，但在 iOS 设备上，第一个console.log能正确输出data，但调用inititeFunction时，函数内的console.log却返回undefined。

我尝试过以下两种方案，均未解决问题：

• 插入空Promise等待：

  await Promise.resolve();
  await inititeFunction(data);
  

• 提前保存参数到变量：

  let eventData = data;
  await inititeFunction(eventData);
  

问题原因及解决方案 #

这是iOS Safari对异步事件回调的参数处理存在兼容性问题——当你把事件回调声明为async函数时，Safari会错误地改变参数的传递逻辑，导致后续异步调用时参数丢失。另外，自定义事件的有效参数通常存储在event.detail属性中，直接将事件对象当作业务数据传递的写法本身就不符合标准，只是桌面和Android浏览器做了兼容处理。

正确解决方式： #

不要直接将事件回调设为async函数，而是在同步回调中先提取并保存需要的参数，再在异步逻辑中使用：

方案一：同步回调内嵌套异步自执行函数

document.addEventListener('customEvent', (event) => {
    // 提取自定义事件传递的实际数据
    const data = event.detail;
    
    (async () => {
        try {
            console.log('before function:', data);
            await inititeFunction(data);
        } catch (err) {
            console.error('function failed:', err);
        }
    })();
});

async function inititeFunction (data) {
    console.log('inside function:', data);
}

方案二：将异步逻辑抽离为独立函数

document.addEventListener('customEvent', (event) => {
    const data = event.detail;
    // 调用独立的异步处理函数
    handleCustomEvent(data);
});

async function handleCustomEvent(data) {
    try {
        console.log('before function:', data);
        await inititeFunction(data);
    } catch (err) {
        console.error('function failed:', err);
    }
}

async function inititeFunction (data) {
    console.log('inside function:', data);
}

核心要点： #

1. iOS Safari中，异步事件回调的参数绑定会在异步执行阶段失效，必须在同步代码块内提前提取并保存参数值，再传入异步函数使用。
2. 自定义事件传递数据时，要遵循标准写法，通过event.detail存储和读取数据，避免直接使用事件对象作为业务数据。

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