fineder, LLC.

to derive fine.

[AngularJS]$timeoutを使ってカウントアップ。


Ajaxによるデータベースとの連携が増えてきた昨今、非同期連携は欠かせません。
setTimeoutという関数がJavascriptにはありますが、同様のものがAngularJSにもあります。
それを使って、1秒置きにカウントアップするプログラムを書いてみました。

JSFIDDLEのソースはこちら

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script>
    function MyCtrl($scope,$timeout) {

        //読み込み時の初期値設定
        $scope.testnum=0; 
        
          $scope.updateValue = function(){
              $timeout(function(){
                $scope.testnum++;
                $scope.updateValue();
            },1000);
          }

          //読み込み時にカウントアップ処理をスタートさせる
          $scope.updateValue();
        };
    </script>
</head>
<body ng-app>
 
    <section ng-controller="MyCtrl">
     
    <h1>■countup per 1sec.</h1>
        {{testnum}}
    </section>
    </body>
</html>​

$timeoutを読み込むことを忘れずに。

timeoutを使うためには$timeoutサービスを読み込むことが必要です。
忘れずにー。

使い方;$timeout(fn(),[delay], [invokeApply])

使い方は $timeout(fn(),[delay], [invokeApply])で、
fn()に関数、delayに関数が読み込まれてからfunctionの実行を開始するまでの時間をミリ秒で設定します。
invokeApplyはただいま調査中です。(戻りのチェックの有る無し?)
公式ドキュメントでは以下のように書いてました。

invokeApply(optional=true) – {boolean=} – If set to false skips model dirty checking, otherwise will invoke fn within the $apply block.

これをふまえて上記の例では下記のようにしています。

$scope.updateValue = function(){
    $timeout(function(){
    $scope.testnum++;
    $scope.updateValue();
},1000);

処理は単にtestnumをカウントアップしているだけです。
そしてその後に再度自分自身(updateValue)を読み込むようにしているので、その1秒後に再度カウントアップ処理が実行される、というようになります。

簡単ですが、こんな感じでー。

fine:derの購読はFacebookページが便利です。