Javascript - 显示微调器，同步保存数据，删除微调器

Question

我正在尝试创建一个javascript插件，允许您挂钩进入保存操作。我想在逻辑上包含一些逻辑：

1. 显示微调器
2. 执行保存挂钩
3. 执行保存逻辑
4. 删除微调器

这是我的代码示例：

function save(){
    var settings = getSettings();

    showSpinner();

    // Hook-in call
    if(settings.onSave)
        settings.onSave();

    saveState();

    removeSpinner();
}

showSpinner（）只是隐藏了保存/取消按钮，并在其位置显示了一个微调器。

hideSpinner（）正好相反。

saveState（）将输入字段中的数据保存到其数据属性中。

settings.onSave（）可以是插件用户传递给配置的任何代码。

当我运行该过程时，即使我定义的挂钩需要大约1.5秒才能返回，微调器也不会显示出来。如果我在调试器中暂停代码，则微调器确实有机会显示，并且在操作完成后它确实会消失。

解决此问题的最佳方法是什么？我对javascript中的异步设计模式一点也不熟悉。我知道有一个单独的线程可以运行javascript，但我不知道为什么保存操作会妨碍显示微调器。

Answer 1

在Javascript将控制权交还给浏览器之前，您的浏览器不会更新界面，这意味着您需要在浏览器显示微调器之前从函数返回。使用setTimeout简单地将控制权交还给浏览器。

function save(){

    showSpinner();

    setTimeout(function(){
        var settings = getSettings();

        // Hook-in call
        if(settings.onSave)
            settings.onSave();

        saveState();

        removeSpinner();
    }, 0 );
}