Web应用程序 - 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 );
}