iT邦幫忙

DAY 17
3

入門AngularJS筆記與前端領域的學習筆記分享系列 第 17

Day17- 入門AngularJS筆記-AngularJS的timeout應用

$timeout是什麼?

timeout 顧名思義是和時間有關,用來倒數、計時的一種方法。

而$timeout則是應用於angular的指令

本日參考範例:

  1. 運用window 物件的 setInterval() 方法

http://jsbin.com/eyaPAtU/1/edit

  1. 運用angular的$timeout指令

http://jsbin.com/EmijUBi/1/edit

  1. 運用angular的$timeout指令,倒數後執行按鈕無法點選的行為案例

http://jsbin.com/EYiyUGe/2/edit
$timeout怎麼用?

說明$timeout之前,先介紹window 物件的 setInterval() 方法

可以參考w3schools文件,

http://www.w3schools.com/jsref/met\_win\_setinterval.asp

第一個範例是:

使用angular,結合window 物件的 setInterval() 方法

  1. 啓動timeout

    var timer = setInterval(function(){
    $scope.countDown--;
    $scope.$apply();
    console.log($scope.countDown);
    }, 1000);

  2. 取消timeout

    $scope.stop = function(){
    window.clearInterval(timer);
    };

範例來源參考:
http://stackoverflow.com/questions/12050268/angularjs-make-a-simple-countdown

改寫Demo:

http://jsbin.com/eyaPAtU/1/edit

第二個範例是:

運用angular的$timeout指令

  1. 以ng-controller宣告timeout執行區域,並傳入$timeout指令

html:

<body ng-controller="Ctrl">

js:

function Ctrl($scope,$timeout) { }
  1. 透過$timeout觸發timeout

    $scope.onTimeout = function(){
    $scope.counter++;
    mytimeout = $timeout($scope.onTimeout,1000);
    };
    var mytimeout = $timeout($scope.onTimeout,1000);

  2. 再使用$timeout.cancel執行停止timeout的事件,

    $scope.stop = function(){
    $timeout.cancel(mytimeout);
    };

改寫Demo:

http://jsbin.com/EmijUBi/1/edit

第三個範例是:

運用angular的$timeout指令,倒數後執行按鈕無法點選的行為案例

http://jsbin.com/EYiyUGe/2/edit

參考資料:
官方說明文件: http://docs.angularjs.org/api/ng.$timeout
官方複雜的demo: http://jsfiddle.net/api/post/library/pure/
第2個範例來源: http://jsfiddle.net/ganarajpr/LQGE2/
第3個範例來源: http://stackoverflow.com/questions/16069309/how-to-change-value-after-delay-by-using-angularjs
進階應用-How to put a delay on AngularJS instant search?:
http://stackoverflow.com/questions/15304562/how-to-put-a-delay-on-angularjs-instant-search
進階應用-directive:
http://stackoverflow.com/questions/16824157/angularjs-directive-how-do-i-hide-the-alert-using-timeout
進階應用-動態變換字串
http://jsfiddle.net/b8KLQ/3/


上一篇
Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
下一篇
Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

2 則留言

0

我要留言

立即登入留言