計數器方法:setInterval()、setTimeout()方法 及 clearInterval()、clearTimeout()方法
簡單介紹:
(1)setInterval()和clearInterval():
setInterval():周期性地調用一個函數(function)或者執行一段代碼。
clearInterval()
:取消掉用setInterval設置的重復執行動作。
(2)setTimeout()和clearTimeout():
setTimeout():
在指定的延遲時間之后調用一個函數或者執行一個代碼片段。
clearTimeout():方法可取消由 setTimeout() 方法設置的 timeout。
詳細介紹見鏈接:https://segmentfault.com/a/1190000002475127
下面顯示簡單的setInterval()方法的案例:
顯示效果如下圖所示:
詳細代碼如下圖:
代碼講解:
第20-22行代碼:獲取元素div及input、設置變量clearTime為null(用於存放后面的計數器方法)。
第25行代碼:把setInterval計數器存入變量clearTime中;當點擊第一個按鈕,啟動計數器方法,讓div不停地執行向右移動的運動。
第30行代碼:當點擊第二個按鈕,執行clearInterval()方法,清除存入到變量clearTime中的setInterval計數器方法,讓div暫停向右的運動。
檢測clearTime變量的值:(第31行代碼)
clearTime輸出為:第25行代碼setInterval的計數器方法進行的次數; 因為clearTime變量是在外部定義的,所以在31行代碼函數內部訪問的到clearTime的內容