2

http インターセプター ディレクティブを使用してスピナーをロードしています。スクリプト コードは次のとおりです。

createProfileModule.config(['$httpProvider', function ($httpProvider) {
    var $http,
        interceptor = ['$q', '$injector', function ($q, $injector) {
            var error;

            function success(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return response;
            }

            function error(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return $q.reject(response);
            }

            return function (promise) {

                $('#loadingWidget').show();
                return promise.then(success, error);
            }
        }];

    $httpProvider.responseInterceptors.push(interceptor);
}]);

そしてHTMLでは、必要なCSSでこのようにdivを呼び出しています

<div id="loadingWidget" style="display:none;"></div>


 <style>
#loadingWidget { position: absolute; z-index:2;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    background: #000000 url(/ERegII-1.0/images/ajax-loader.gif) no-repeat center; 
    cursor: not-allowed;
    filter: alpha(opacity=60);
    opacity: 0.6;
     content:'Loading..';
     background-size:100px 100px;

     }
</style>

このスピナーを賢くしたいこと。小さな http 呼び出しごとにスピナーを表示したくありません。したがって、リクエストが非常に小さく、数ミリ秒かかる場合は、スピナーを表示したくありません。スピナーに遅延時間を追加したい.. 2秒としましょう。したがって、リクエストに2秒以上かかる場合、このスピナーが表示されるはずです。それ以外の場合は、表示したくありません。誰かがこれの解決策を見つけるのを手伝ってくれますか? https://github.com/ajoslin/angular-promise-trackerを試しましたが、うまくいかないようです。

誰かがそれをより賢くするのを手伝ってくれますか?

4

1 に答える 1

0

リクエストに 2 秒以上かかる場合は、$timeout サービス (ま​​たはネイティブの setTimeout) を使用して、ローダーの表示を遅らせることができます。$timeout の例を次に示します。

createProfileModule.config(['$httpProvider', '$timeout', function ($httpProvider, $timeout) {
...
var finished = true;

return function (promise) {
    finished = false;
    $timeout(function () {
        if (!finished) $('#loadingWidget').show();
    }, 2000); // wait 2 seconds
    return promise.then(success, error).finally(function () {
        finished = true;
    });
}

リクエストがまだ完了しているかどうかを追跡するために、「finished」というローカル変数を使用しています。各リクエストの前に false に設定し、Promise の 'finally' コールバックで true に設定して、リクエストが終了したことを示します。次に、$timeout を使用してローダーの表示を 2 秒遅らせ、finished がまだ false の場合にのみ表示します。

于 2014-06-10T20:47:00.023 に答える