ページの処理が遅いので時計マークを出したいが、AngularJS ではすぐに表示させられない。

Question

Ajax でデータをサーバから取得してページの更新はローカル（ブラウザ）側で行うプログラムがあります。
ボタンをクリックしたら、サーバにリクエストを出すのですが、ページの更新までの処理に時間がかかるため、時計マークを表示しています。
この時計マークがボタンを押されてすぐに表示されないので、ボタンを押したらすぐに時計マークを表示するように修正をお願いされました。

コードを見るとAngularJSを使用しているようでトリガーには onClickではなく ng-click　が使われていました。

[HTML]
<div id="forward" ng-click="forwardAction();" title="forwardAction"></div>

[js]
$scope.forwardAction = function(){
    $scope.displayWaitingIcon(); // ここで時計マークを表示
    $scope.forwardActionExecute(); //ボタンを押した時の処理
}

これを以下のようにAngularJSを使わないように書き直すとすぐに時計マークは表示されます。

[HTML]
<div id="forward" onClick="forwardAction();" title="forward"></div>

[js]
forwardAction function(){
    $displayWaitingIcon(); // ここで時計マークを表示
    //$scope.forwardActionExecute(); //ボタンを押した時の処理
}

displayWaitingIcon function (){
    // 時計マークを表示
}

しかし、これでは forwardAction() から AngularJS の関数を呼べないので以下のように書き換えたところ、またしても最初と同じように時計マークが表示されるまで時間がかかるようになてしまいました。

[js]
forwardAction function(){
    $displayWaitingIcon(); // ここで時計マークを表示

    var element = document.getElementById("myElement");
    var $scope = angular.element('#myElement').scope()
    $scope.forwardActionExecute(); //ボタンを押した時の処理
}

displayWaitingIcon function (){
    // 時計マークを表示
}

なんとか、ボタンを押したら時計アイコンをすぐに出力したいのですが、AngularJS のコード($scope.xxx) を呼ぶと時計アイコンがすぐに表示されません。
AngularJSを使いつつ、ボタンを押した直後に時計アイコンを出力させるにはどのようにしたらよろしいでしょうか？
ヒントだけでも教えていただけないでしょうか？

クライアント側は Windows 10/Google Chrome を使用しています。

以上よろしくお願いいたします。

Answer 1

AngularJS,Angular使ってないのでまとはずれかもですが...

forwardAction();を呼ぶ前にdisplayWaitingIconとか、単にマウスカーソルをWaitにするとか出来ないんでしょうか？

Comments

[salsa]

ありがとうございます。
forwardAction() の中で AngularJS のfunction を呼ばなければ、ボタンを押した直後に時計アイコンは表示されるのですが、AngularJSのfunctionを呼ぶと、ボタンイベントが発生したときに dirty-checking というものが行われるそうで、そこに時間がかかっているようです。
その後調べたところ、一般的には dirty-checking にかかる時間を短縮するのが正解のようですが、そうなるとページ全体をリファクタリングすることになるので、もっと簡易的にできないか模索中です。

[oikashinoa]

AngularJSの処理が遅いのであれば、以下のように出来ないかなぁと思った次第です。
とりあえず素早くカーソルを変えてから時間かかる処理をおこうなう。

```html
<div id="forward" onClick="forwardAction();" title="forward"></div>
↓
<div id="forward" onClick="cssCursorWait();forwardAction();" title="forward"></div>
```

```js
const cssCursorWait = () => {CSSでカーソルをWaitにする};
// https://developer.mozilla.org/ja/docs/Web/CSS/cursor
```

[salsa]

ありがとうございます。
実は同じアプリケーション内に複数のページがあるのですが、このページだけAngularJSを使用しています。

他のページでも時計アイコンを使用しているため、このページだけ挙動を変えるわけにはいかないのです。

また、頂いたサンプルですが挙動としては私の3番目のコードと同じです。

実際にこのように変更してもすぐに時計アイコンは表示されません。
forwardAction() 内で AngularJS のファンクションを呼ぶと。onClick が呼ばれた時点で dirty-cheking が発動するようです。

[html]
<div id="forward" onClick="displayWaitingIcon();forwardAction();" title="forward"></div>

[js]
forwardAction function(){
var element = document.getElementById("myElement");
var $scope = angular.element('#myElement').scope()
$scope.forwardActionExecute(); //ボタンを押した時の処理
}