JS基礎入門篇（十三）—定時器

BenCHou 發布于2019-08-22 17:33 / 2627人閱讀

摘要：但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。，通過傳入定時器的編號來。清除定時器，再開啟定時器。所以，每次打開定時器，先清除前一個。點擊頁面任何一個位置關閉定時器。

1.定時器

定義：當我們需要隔一段時間，再執行一段代碼。或者每隔一段時間，執行一段代碼。我們可以使用定時器。
使用場景：例如網站輪播圖的自動滾動。廣告延遲彈出的某些操作

2.定時器-setInterval

定時器-setInterval基本定義

setInterval
間隔型定時器：每隔一段時間執行一段代碼。
注意：代碼一般會重復執行

語法
setInterval（函數，時間間隔）;
eg:
setInterval（fn，20）;指的是每隔20 毫秒執行一段函數
時間間隔的單位：是毫秒（ms）1s = 1000ms

返回值
setInterval（重復執行的代碼，時間間隔）;這段代碼的返回值是分配定時器一個獨有的編號。這個編號跟關閉定時器有關。當你開啟很多定時器的時候，你想關閉哪一個定時器，就需要知道對應的編號然后關閉。就是每開啟一個定時器，會給這個定時器貼一個編號，編號是數字類型的，會由這段代碼的返回值傳遞出編碼。

使用舉例1—無參函數

使用舉例2—有參函數

注意：

以下是代碼執行結果：先打印222和333。之后1s后打印1.

3.setInterval—輪播圖




    
    Title

自動播放效果，可以點擊查看。因為codepen不方便放圖片，就用顏色代替

4.setInterval—輪播圖的停止

css樣式我就刪除了，直接給出js和html。需要全部代碼的可以從鏈接下面去看。點擊鏈接中的css，html，js都可以查看對應的代碼。

方式一：控制步長來停止輪播圖的運動，但是定時器還沒關（聽語言描述可能有些模糊，直接上代碼）
通過步長來控制停止輪播圖的運動，點擊查看效果

方式二：通過一個變量來控制定時器中函數的執行，但是定時器還是沒關。
通過onoff變量來控制定時器內函數的執行

方式三：通過關閉定時器來停止輪播圖的運動。
此方法簡潔，不需要添加額外的變量。但是有時候也需要以上兩種方法。
直接關閉定時器，點擊css，html，js可以查看對應代碼

5.setInterval—輪播圖的停止和開始

方式一：清除定時器，再開啟定時器。
清除定時器，再開啟定時器。注意：重新開啟定時器的時候也要清除前一個定時器




    
    Title

方式二：使用變量控制定時器的開始與停止
使用step步長控制定時器的開始與停止

方式三：使用變量重新開始定時器
使用變量重新開始定時器

6.定時器-setTimeout

定時器-setTimeout基本定義

延遲型定時器

隔一段時間執行一段代碼（執行一次）

語法：
setTimeout(函數,時間間隔)
比如setTimeout(fn,20)

隔（等待）20 毫秒執行一段函數

時間間隔的單位：是毫秒（ms）
1s = 1000ms

返回值：定時器唯一的編號

注意：雖然只執行一次，就不執行了。但是還是要關閉定時器，不然會消耗性能。

1.舉例說明
點擊查看以下代碼效果

2.使用遞歸，讓setTimeout定時器有setInterval的效果
點擊鏈接查看以下代碼效果！！！

GPU云服務器云服務器 js零基礎入門視頻入門篇基礎篇之基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95284.html

JS基礎入門篇（十三）—定時器

摘要：但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。，通過傳入定時器的編號來。清除定時器，再開啟定時器。所以，每次打開定時器，先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器定義：當我們需要隔一段時間，再執行一段代碼。或者每隔一段時間，執行一段代碼。我們可以使用定時器。使用場景：例如網站輪播圖的自動滾動。廣告延遲彈出的某些...

kaka 2019-08-29 15:31 評論0 收藏0
JS基礎入門篇（十三）—定時器

摘要：但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。，通過傳入定時器的編號來。清除定時器，再開啟定時器。所以，每次打開定時器，先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器定義：當我們需要隔一段時間，再執行一段代碼。或者每隔一段時間，執行一段代碼。我們可以使用定時器。使用場景：例如網站輪播圖的自動滾動。廣告延遲彈出的某些...

ermaoL 2019-08-02 10:32 評論0 收藏0
JS基礎入門篇（四十三）—ES6（二）

摘要：對象簡潔表示法原來寫法簡潔寫法方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。方法按照原始數組元素順序依次處理元素。注意不會對空數組進行檢測。運行結果為舉例說明二其中是函數，當沒有第二個參數時。有三個參數，并沒有深入研究。 1.對象簡潔表示法原來寫法 var name = lzf; var gender = male; var fn = fu...

劉厚水 2019-08-02 10:52 評論0 收藏0
JS基礎入門篇（四十三）—ES6（二）

摘要：對象簡潔表示法原來寫法簡潔寫法方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。方法按照原始數組元素順序依次處理元素。注意不會對空數組進行檢測。運行結果為舉例說明二其中是函數，當沒有第二個參數時。有三個參數，并沒有深入研究。 1.對象簡潔表示法原來寫法 var name = lzf; var gender = male; var fn = fu...

rozbo 2019-08-30 15:54 評論0 收藏0
JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調用Re...

caspar 2019-08-22 18:18 評論0 收藏0