亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript中的定時器怎么創建

發布時間:2022-08-05 09:35:54 來源:億速云 閱讀:267 作者:iii 欄目:web開發

這篇文章主要介紹了JavaScript中的定時器怎么創建的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇JavaScript中的定時器怎么創建文章都會有所收獲,下面我們一起來看看吧。

JavaScript中的定時器怎么創建

JavaScript 中有兩種定時器:

  • setTimeout():指定時間后執行一段代碼(延遲執行)。

  • setInterval():每隔一段時間執行一段代碼(間隔執行)。

JavaScript提供定時器(timer)的功能,可以延期執行或重復執行函數或代碼段。

方法說明
setTimeout()在指定的毫秒數后調用函數或執行一段代碼
setInterval()按照指定的周期(以毫秒計)來調用函數或執行一段代碼
clearTimeout()取消由setTimeout()方法設置的定時器
clearInterval()取消由setInterval()設置的定時器

下面單獨對兩種計時器進行講解。

setTimeout()

創建定時器

setTimeout(() => console.log("我在兩秒后被輸出!"), 2*1000); // 1000 = 1s
// 執行上述代碼,兩秒后會在控制臺輸出:我在兩秒后被輸出!

setTimeout() 中共有 4 個參數,這里只使用兩個參數,第一個參數是一個箭頭函數,第二個參數表示在多少秒后執行這個箭頭函數。這個過程稱為回調,這個箭頭函數稱為回調函數。

回調函數

將一個函數作為一個參數傳入另一個函數,另一個函數執行完成后再執行傳入的函數。上述代碼中,箭頭函數被當作參數傳入 setTimeout() ,setTimeout() 兩秒后執行完畢, 于是開始執行箭頭函數,所以我們看到的結果會延遲兩秒才輸出。

箭頭函數

箭頭函數與普通函數的含義是相同的,只是表示方式不同。因為箭頭函數非常簡潔,所以常被嵌入其他函數。如果想深入了解請參考其他資料,這里不再贅述。

取消定時器

在創建這個定時器時會返回這個定時器任務的唯一標識符:

let t = setTimeout(() => console.log("我在兩秒后被輸出!"), 2*1000); // 1000 = 1s
// t 即是一個標識符,但它不是我們認為的那種標識符,你可以打印出來試試!

clearTimeout() 用于取消一個定時任務,前提是這個定時任務還沒被觸發:

clearTimeout(t);    // 傳入定時任務的標識符
console.log("任務取消,兩秒后我不會有任何輸出!")

setInterval()

創建定時器

參數的用法與 setTimeout() 一致,區別在于,這個定時器它會一直循環執行,運行下面的代碼查看效果:

let t = setInterval(() => console.log("每隔一秒我會被輸出一次!"), 1000)

取消定時器

clearInterval() 用于取消循環定時任務,運行以下代碼查看效果:

let t = setInterval(() => console.log("每隔一秒我會被輸出一次!"), 1000);
// 用上面學到的 setTimeout() 來取消循環定時任務
setTimeout(() => {
    clearInterval(t); 
    console.log("我在五秒時被取消!");
;}, 5*1000);

深入理解定時器

在深入理解定時器前,我們需要了解一下 JavaScript 的單線程。因為 JavaScript 是單線程的,所以每次只能執行一段代碼。JavaScript 中的任務執行有一個隊列的概念,即任務會被排進隊列按先入先出的順序執行。

setTimeout() 定時器演示:

let i = 0;
console.log(i);
setTimeout(() => console.log("我在兩秒后被輸出!"), 2*1000);
console.log("Hello world!");

用動畫來演示一下下面代碼的執行過程:

JavaScript中的定時器怎么創建

程序中的代碼會被逐個添加到隊列中,當執行到 setTimeout() 時,不會立即被添加到隊列中,定時器會被延遲兩秒。在定時器延遲的過程中,程序不會等待,而是直接執行下一段代碼,所以 “Hello world!” 會提前被輸出。兩秒之后,定時器任務會被添加到隊列中,并輸出 “我在兩秒后被輸出!” 這句話。

希望動畫能讓大家理解!這里隊列的動畫實質上不是這樣,隊列有進有出,定時器任務在兩秒后被添加到隊列中,由于程序執行速度非常快,隊列里面的代碼理論上已經執行完了,此時的隊列應該是空的。動畫制作麻煩,所以我沒有刪除隊列中的代碼,大家可以把隊列里的代碼想象成已經執行完的代碼。

setInterval() 定時器演示

和 setTimeout() 理論一樣,區別在于 setInterval() 每隔一段時間就會給隊列添加一個定時任務。

使用 setInterval() 有些問題需要注意,比如當代碼遇到阻塞時,循環定時的任務會被累積,阻塞結束時,這些累積的任務會無視間隔時間連續執行,因為它們已經被添加到隊列中。看下面的演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
</head>
<body>
    <script>
        let t = setInterval(() => alert("我會阻塞程序!如果你不及時點確認的話。"), 2*1000);
    </script>
</body>
</html>

看看執行結果:

JavaScript中的定時器怎么創建

當警示框彈出時,及時點擊確定不會造成阻塞,因此,警示框會每隔一秒彈出一次。中間沒有及時點擊確認,導致任務堆積,阻塞結束后會連續顯示出來。

setTimeout() 實現循環定時

let i = 0;

function timer() {
    i++;
    console.log(i);
    // 函數內定時器的回調函數會繼續調用 timer()
    // 每秒自調用一次,因此實現類似死循環的效果
    setTimeout( () => { 
        timer(); 
    }, 1000);
}
// 啟動函數
timer()

程序會每隔一秒輸出一個值。

關于“JavaScript中的定時器怎么創建”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“JavaScript中的定時器怎么創建”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

会理县| 彰化市| 张家口市| 文昌市| 若羌县| 太康县| 富锦市| 太谷县| 甘洛县| 伊春市| 镇雄县| 虎林市| 来凤县| 东宁县| 洞口县| 兴业县| 阳原县| 延寿县| 商丘市| 沐川县| 绵阳市| 阳江市| 桃源县| 松溪县| 蕲春县| 金坛市| 蓬莱市| 南乐县| 利津县| 房产| 镇宁| 桐梓县| 临湘市| 同江市| 四川省| 余江县| 延安市| 泗阳县| 南澳县| 金昌市| 潜江市|