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

我正在尝试创建一个javascript插件，它允许您钩住save操作。不过，我希望在逻辑周围有一些逻辑：

展示旋转器

执行savehook-in

执行保存逻辑

拆下旋转器

下面是我的代码示例：

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可以在一个线程上运行，但我不知道为什么保存操作会妨碍显示微调器。

在javascript将控制权返回浏览器之前，浏览器不会更新界面，这意味着您需要在浏览器显示微调器之前从函数返回。使用

setTimeout

短暂地将控制权交还给浏览器

function save(){

    showSpinner();

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

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

        saveState();

        removeSpinner();
    }, 0 );
} 

---

可能的重复实际上是一种精确的重复，但是，这个答案缺乏一个可证明的解决方案，并且有点令人失望。这很有效，谢谢你的回答。但是，我明白为什么spinner.gif不旋转。是否有一种设计模式可以用来使save调用异步，即使它不是由用户传入hook-in函数定义的？不，不。根据我的经验，浏览器本身应该具有足够多的线程，以便在执行javascript时旋转.gif。在这种情况下，您的settings.onSave（）具体做什么？无论用户定义什么。在我的例子中，它对我的web服务进行同步调用，以将一些数据保存到数据库中。它之所以是同步的，是因为我想在挂接后运行操作，我永远无法提前知道除了我自己以外的用户会将什么定义为挂接函数。问题是，如果您将总控制权交给用户（比如让他们编写保存函数），那么对于他们如何行使控制权，你也无能为力。Javascript没有强制重画的方法，也没有可靠的功能性方法来修改其他人的代码。哦，事实证明我错了——你不能在JS执行时设置gif动画。为什么？我不确定。看起来很傻。我要再试试我在这里找到的东西。如果有帮助，我会告诉你的。