jQuery Timer Plugin

jQuery 是一個很強大的 framwork , 自從了解如何使用之後，我吃了以後頭腦靈活了很多,
每次考試都得一百分呢!!
寫網頁變得輕鬆寫意(?)，就如同 jQuery 的 slogan : Write less, Do more

jQuery 的另外一個好處就是，他開放了一些標準給使用者能夠自行開發 plugin
擴充其功能，這邊介紹的 plugin 是： jQuery Timer plugin

官方網站：http://jquery.offput.ca/every/
授權方式：WTFPL (do whatever the fuck you want with it)

在開始介紹之前，先回顧一下標準的 Javascript timer 要怎麼使用：



setTimeout( fn , interval , [ arg0 , arg1 ,.....]) ;
setInterval( fn , interval , [ arg0 , arg1 ,.....]) ;

Reference : w3c , JavaScript Kit

這兩個 method 都是 window 物件的成員，使用方式就不再贅述
可以參考兩個 reference。

這兩個方法在 js 裡面是唯一的 timer function , 但是使用上實在是很不直觀，
而且在管理上也相當麻煩，例如要停止某的 timer , 還要先宣告變數儲存其
timer ID , 再透過 clearTimeout() 或者 clearInterval() 來停止。

jQuery timer 提供了方便開發者管理所有 timer 的方法，在撰寫和維護上變得相當方便。

不過老話一句，我們無法做到原本不存在的東西，就如同金手指(遊戲修改大師)在怎
麼神通廣大，也無法修改出遊戲不存在的道具； plugin 也一樣， jQuery Timer 骨子裡
也只是使用 setTimeout 和 setInterval 來處理，只是多了一些功能而已。

廢話到此結束，先來看一下這個 plugin 提供了哪些東西：
PS : 在寫此篇文章時，這個 plugin 還在開發中，版本是 1.2.0

everyTime(interval, [label], fn, [,limit], [belay])
oneTime(interval, [label,] fn)
stopTime ([label] [,fn])

everyTime : 每一段時間觸發一次的 timer , 和 setInterval 相同 。
oneTime : 只觸發一次，如同 setTimeout。
stopTime : 根據傳入的資料停止指定的 timer。

NOTE : 上方下載的版本中還有 belay 這個參數，但是在 1.2.0 中已經移除，故不建議使用

參數說明：

interval - Integer or String
 時間間隔，若傳入整數表示以 ms 為單位
 傳入字串則可自訂單位，例如：
    '200ms' - 20毫秒
    '20s' - 20 秒
  單位可以自訂，打開 jquery.timers.js 可以看到類似底下的敘述：

// Yeah this is major overkill...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000

  前面的是單位， 後方就是倍數，可以自訂

lable - String
  這個 timer 的標籤，也就是 timer 名稱，方便管理 time
  停止 timer 時只需要傳入名字，就會停止該 timer

fn - Function
  每隔一個 interval 要執行的  function

limit - Integer
  次數限制，這個 timer 最多執行幾次， 0 表示不限制

belay - Boolean Deprecated
  當下一次事件發生時，上一次的事件還在運作中(如 function 中 code 要跑比較久)
  是否跳過這次觸發，等待到跑完。


這些 method 的使用都是掛在一個 jQuery Object 後面的，舉例：

// 每兩秒執行一次 timerFunc() 最多跑 10 次, 命名為 myTimer1
$("body").everyTime('2s','myTimer1',timerFunc,10);
// 底下不再贅述
$("div#theID").oneTime( 200 , oneTimeFunction );
$(document).stopTime('theTimerName');

在管理每一個 timer 的時候，會先以其 Object 為主，在往下尋找符合的
項目，例如：

//停止所有在 $('#ID1')上的 timer
$('#ID1').stopTime ();

//停止$('#ID2') 上名為 XD 的 timer
$('#ID2').stopTime ('XD');

//停止$('.class1') 上所有呼叫 test() 的 timer
$('.class1').stopTime (test);

這樣一來管理就方便多了。

最後，由於是以物件為主，所以在呼叫的 function 中，可以透過
this 來取得這個 DOM 物件，是不是很方便呢？

參考這兩個 jsFiddle

使用 jQuery Timer : http://jsfiddle.net/darkk6/Chs9S/
只使用 jQuery : http://jsfiddle.net/darkk6/4YKPr/