0

保存操作にフックできるjavascriptプラグインを作成しようとしています。ただし、ロジックをラップするロジックが必要です。

  1. スピナーを表示する
  2. 保存フックインを実行します
  3. 保存ロジックを実行する
  4. スピナーを取り外します

これが私のコードの例です：

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

    showSpinner();

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

    saveState();

    removeSpinner();
}

showSpinner（）は、保存/キャンセルボタンを非表示にし、その場所にスピナーを表示します。

hiddenSpinner（）は反対のことをします。

saveState（）は、入力フィールドからのデータをそれらのデータ属性に保存します。

settings.onSave（）は、プラグインのユーザーによって構成に渡されるコードであれば何でもかまいません。

プロセスを実行すると、定義したフックインが戻るまでに約1.5秒かかりますが、スピナーが表示されません。デバッガーでコードを一時停止すると、スピナーが表示される可能性があり、操作が完了すると表示されなくなります。

これを解決するための最良のアプローチは何ですか？私はjavascript内の非同期デザインパターンにまったく精通していません。javascriptを実行できるスレッドが1つあることは知っていますが、保存操作がスピナーの表示の邪魔になる理由がわかりません。

4

1 に答える 1

1

Javascriptがブラウザに制御を戻すまで、ブラウザはインターフェイスを更新しません。つまり、ブラウザにスピナーが表示される前に、関数から戻る必要があります。setTimeout一時的にブラウザに制御を戻すために使用します。

function save(){

    showSpinner();

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

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

        saveState();

        removeSpinner();
    }, 0 );
}
于 2013-01-24T16:10:42.517 に答える