等待Promise完成执行回调：第三方库异步数据修改失效（ES5兼容）

这个问题我之前也碰到过——第三方库的gotResults事件回调是同步执行的，它会在你的回调函数执行完毕后立刻读取数据渲染UI，而Ajax/Promise这类异步操作的回调要等到后续事件循环才会触发，这时候渲染早就完成了，所以你的修改根本不会被用到。结合你不能修改第三方库、必须兼容ES5的限制，给你几个可行的方案：

方案1：Object.defineProperty数据劫持+DOM兜底更新（最可靠） #

这个方案通过ES5的Object.defineProperty包装你要异步修改的属性，既保证数据被正确修改，又能在异步请求完成后强制更新UI，不管第三方库的渲染逻辑是怎样的。

d.on('gotResults', function (data) {
    // 同步修改的属性正常处理，不受影响
    data.title = 'newTitle';

    // 初始化缓存变量，用占位符先让库渲染
    let somePropertyCache = '加载中...';

    // 用Object.defineProperty包装目标属性
    Object.defineProperty(data, 'someProperty', {
        get: function() {
            // 库读取属性时返回当前缓存的值
            return somePropertyCache;
        },
        set: function(newValue) {
            // 更新缓存，同时尝试找到对应的DOM元素更新UI
            somePropertyCache = newValue;
            // 这里需要根据第三方库的DOM结构调整选择器
            // 假设库会给渲染元素加上data-id属性，且目标内容有特定类名
            const targetElement = document.querySelector(`[data-id="${data.id}"] .some-property-content`);
            if (targetElement) {
                targetElement.textContent = newValue;
            }
        },
        enumerable: true, // 必须设为true，保证属性能被库枚举读取
        configurable: true // 允许后续修改属性配置
    });

    // 发起异步Ajax请求
    $.ajax('http://someurl...', { data: { id: data.id } }, function(res) {
        // 设置属性，触发setter更新缓存和DOM
        data.someProperty = res.thatProperty;
    });
});

优点：兼容性好（IE9+支持，符合ES5要求），不依赖第三方库的内部逻辑，能确保数据和UI都更新。
缺点：需要根据第三方库生成的DOM结构写选择器，如果库的DOM结构变化，需要同步调整。

方案2：利用引用类型的特性（依赖库的渲染逻辑） #

如果第三方库在渲染时是浅拷贝数据的属性（即直接引用对象而非复制值），可以先给目标属性赋值一个引用类型的容器，异步请求完成后修改容器内部的属性，这样库渲染的UI会自动更新。

d.on('gotResults', function (data) {
    data.title = 'newTitle';

    // 先给someProperty赋值一个对象容器，作为占位
    data.someProperty = { content: '加载中...' };

    // 发起异步请求
    $.ajax('http://someurl...', { data: { id: data.id } }, function(res) {
        // 修改引用对象的内部属性，而非替换整个属性
        data.someProperty.content = res.thatProperty;
    });
});

注意：这个方案的前提是第三方库渲染的是data.someProperty.content而非直接读取data.someProperty的原始值。如果库是直接渲染data.someProperty，那你可以在请求完成后替换整个属性，再手动更新DOM（参考方案1的DOM更新逻辑）。

优点：代码更简洁，不需要操作DOM。
缺点：完全依赖第三方库的渲染逻辑，兼容性较差。

方案3：同步Ajax（极端情况备选，不推荐） #

这个方案用同步XMLHttpRequest阻塞页面，直到请求完成再修改数据，虽然能让修改同步生效，但会导致浏览器卡死，用户体验极差，只建议在请求耗时极短且没有其他选择的情况下使用。

d.on('gotResults', function (data) {
    data.title = 'newTitle';

    // 创建同步XMLHttpRequest请求
    const xhr = new XMLHttpRequest();
    // 第三个参数设为false表示同步请求
    xhr.open('GET', `http://someurl...?id=${data.id}`, false);
    xhr.send();

    if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        data.someProperty = res.thatProperty;
    }
});

优点：不需要考虑异步时机，修改直接生效。
缺点：阻塞浏览器主线程，页面会失去响应直到请求完成，严重影响用户体验。

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