如何处理含异步逻辑的onFieldFocusLost钩子函数（兼容IE10+）

这确实是个很常见的钩子设计痛点——同步逻辑好处理，但异步场景很容易打破原有调用流程，还不想动上层大量已有的代码。结合你的TS转ES5、兼容IE10+的要求，我给你两个可行的方案，优先推荐第一个，改动最小且代码更清晰：

方案一：让Hook支持返回Promise（兼容同步写法） #

核心思路是：允许用户的Hook函数要么返回布尔值（同步场景），要么返回Promise<boolean>（异步场景），然后只修改focus-lost事件的处理逻辑为异步函数——不需要改造上层调用栈，因为事件监听函数本身就是顶层执行的，await只会在这个函数内部生效，不会向上传播。

修改后的应用调用逻辑 #

inputField.addEventListener('focus-lost', async function() {
    // 调用用户的Hook函数
    const hookResult = onFocusLost(inputField);
    
    // 区分同步/异步结果
    const isValid = hookResult instanceof Promise 
        ? await hookResult 
        : Boolean(hookResult);

    if (!isValid) {
        // 异步场景下需要延迟设置焦点，避免被浏览器默认的焦点切换覆盖
        setTimeout(() => forceFocusToRemainOnField(inputField), 0);
        return;
    }
    giveFocusToNextField();
});

用户的异步Hook写法 #

用户只需要把异步逻辑包装成Promise返回即可，同步写法完全兼容：

// 同步写法（保持不变）
function onFocusLost(field) {
    return validRegex.test(field.value);
}

// 异步写法（返回Promise）
function onFocusLost(field) {
    return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/validRegex');
        xhr.onload = () => {
            const validRegex = new RegExp(xhr.responseText);
            resolve(validRegex.test(field.value));
        };
        xhr.onerror = () => resolve(false); // 请求失败默认验证不通过
        xhr.send();
    });
}

兼容IE10+的注意事项 #

• 需要polyfill Promise和async/await：你提到已经可以polyfill await和生成器，那加上Promise的polyfill（比如es6-promise或core-js@3的polyfill）即可。
• 异步场景下用setTimeout延迟设置焦点：因为异步操作完成时，浏览器可能已经完成了焦点切换，延迟0ms可以确保在当前事件循环结束后再拉回焦点，避免被覆盖。

方案二：回调式Hook约定（无需Promise） #

如果不想引入Promise，也可以用回调的方式扩展Hook约定：允许用户的Hook接受第二个回调参数，异步场景下调用回调返回结果，同步场景直接返回布尔值。

修改后的应用调用逻辑 #

inputField.addEventListener('focus-lost', function() {
    let isValid = false;
    let isAsync = false;

    // 定义异步回调函数
    const handleAsyncResult = (result: boolean) => {
        isValid = result;
        finalizeFocusLogic();
    };

    // 调用Hook，同步场景会直接返回结果
    const syncResult = onFocusLost(inputField, handleAsyncResult);

    if (syncResult !== undefined) {
        // 同步场景，直接处理
        isValid = Boolean(syncResult);
        finalizeFocusLogic();
    } else {
        // 异步场景，等待回调触发
        isAsync = true;
    }

    function finalizeFocusLogic() {
        if (!isValid) {
            setTimeout(() => forceFocusToRemainOnField(inputField), 0);
            return;
        }
        giveFocusToNextField();
    }
});

用户的Hook写法 #

// 同步写法（保持不变，可选忽略回调参数）
function onFocusLost(field, callback?) {
    return validRegex.test(field.value);
}

// 异步写法（调用回调返回结果，不返回值）
function onFocusLost(field, callback) {
    doXHR('/validRegex', 'GET', function(validRegex) {
        callback(validRegex.test(field.value));
    });
}

这个方案完全不需要Promise，更适合不想引入polyfill的场景，但代码稍微繁琐一些。

额外优化：避免并发异步请求冲突 #

如果用户快速切换字段，可能会触发多个异步验证请求，旧请求的结果可能会覆盖新的。可以在Hook里加入请求取消逻辑：

// 用户的异步Hook（带请求取消）
let currentXHR: XMLHttpRequest | null = null;

function onFocusLost(field) {
    // 取消之前未完成的请求
    if (currentXHR) {
        currentXHR.abort();
    }

    return new Promise((resolve) => {
        currentXHR = new XMLHttpRequest();
        currentXHR.open('GET', '/validRegex');
        currentXHR.onload = () => {
            currentXHR = null;
            const validRegex = new RegExp(currentXHR.responseText);
            resolve(validRegex.test(field.value));
        };
        currentXHR.onerror = () => {
            currentXHR = null;
            resolve(false);
        };
        currentXHR.send();
    });
}

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