渲染后如何执行除“setTimeout()”之外的函数

Question

环境

Jquery2.0.3

我想做什么

（如聊天应用程序信使）

选择图像文件并显示为预览

↓

提交

↓

删除预览地点

代码

async function send() {
    sendMessage(); // send text(omit detail)
    await sendImage(); // send image
    resetAfterSending(); // delete preview display
}

function sendImage() {
    return new Promise(res => {
        messages.append(`
            <div class=".preview-img">
                <img src="${$('.hoge2').find('img').attr('src')}">
            </div>
        `);

        return messages.ready(() => {
            return res();
        });
    });
}

function resetAfterSending() {
    /**
     * if I use hide() instead of remove(), element remains in DOM element(you can see in chrome elements panel)
     * But in this time, I need to delete in DOM element as well
     */
    $('.preview-img').remove();
}

麻烦

当我没有使用 async/await 时，resetAfterSendingMessage() 被执行并且 DOM 中没有 .preview-img 元素，所以我什至无法发送图像数据。 这就是为什么我尝试在顶部使用类似 async/await 的代码。

但是当我尝试这样更改↓时，可以发送图像。

function send() {
    sendMessage();
    sendImage(); 
    //**use setTimeout()  !!
    setTimeout(() => {
        resetAfterSending();
    },0);
}

我认为 async/await 执行了函数，但没有完成渲染。这会导致问题。 （我什至不知道这是不是真的）

如果我需要在渲染后执行函数，我需要像THIS LINK所说的那样使用setTimeout()？

如果有人知道方法而不是 setTimeout()，请在此处注释掉。你知道 setTimeout() 不是很酷，希望你明白我的意思。

Answer 1

由于sendImage() 返回Promise，您可以使用.then()

sendImage().then(() => resetAfterSending());