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 );
}