定時器JS深入理解解讀

GJ504b發表於2024-11-24
定時器JS

set&clear interval&timeout

相信不論是老油條還是新手小白，你早就聽過或者用過setInterval和setTimeout這倆哥們兒和他們的死敵clearInterval和clearTimeout了吧，作為專案裡的“老面孔”和麵試高頻考點，今天GJ504b就帶大家深入解讀這四大活寶😀

setInterval/setTimeout的統一語法

setInterval/setTimeout(函式，毫秒數)

這裡的函式可以是匿名函式，IFFE

注意：函式是由定時器執行的，所以只寫函式名【函式名+() 代表直接執行，相當於定時器寫了個寂寞】

Talking is cheap,show u the codes!

function example(){
    document.write(Haha);
}
//example();//這樣寫函式已經被呼叫了，你定時器將失效哦~
setInterval(example,1000);//right!

預備知識

JS是一個單執行緒的傢伙

  1. 啥是單執行緒？
    嘻嘻，又到了學習語文的時候啦

    單執行緒☞同一時間只能做一件事情，也就是說，所有的任務需要排隊，前一個任務執行完後，才可以執行下一個任務

    有事件佇列和主執行緒，其中事件佇列包括：定時器，ajax等等，他們遵循先進先出的原則，而主執行緒則第一按序執行
    img

  2. 為什麼它要有單執行緒屬性？
    為了提高使用者體驗感
    你也不想自己的操作被程式多執行緒操作之後由於順序的隨機而面目全非吧😀

  3. 我知道這個有啥用？
    maybe 面試會被問到┏┛墓┗┓...(((m -__-)m
    多知道一點準沒壞處滴，將來也好看AI的程式碼👻

setInterval

HR:setInterval是什麼意思？
U:指-->間歇呼叫，呼叫後，將定時任務處理的函式新增到執行佇列的隊尾

說人話就是呼叫函式每n次（n是你規定的毫秒數）

Talking is cheap,show u the codes!


function example(){
    document.write("我每隔一秒出現一次~");
}
setInterval(example,1000);

setTimeout

HR:setTimeout是什麼意思？
U:指-->超時呼叫，呼叫後，將定時任務處理的函式新增到執行佇列的隊尾

說人話就是過了n後，呼叫一次你的函式（n是你規定的毫秒數）


function example(){
    document.write("我1s之後只出現一次~");
}
setInterval(example,1000);

clearInterval和clearTimeout語法

先把之前寫的set某某賦給一個變數x
然後
結合事件執行（比如點選按鈕[btn]清除間歇呼叫）
btn.onclick = function(){ clearInterval(x); }
btn.onclick = function(){ clearTimeout(x); }

clearInterval

clearTimeout

你大概懂了？來看看3道面試題

（1）執行幾次？輸出結果？
for (var i=0; i<5; i++){
    setTimeout(function(){
    console.log(i);
},1000);
}
（2）這個函式的功能是什麼？
for(let i=0; i<3; i++){
    setTimeout(function(){
    console.log(i);
},1000*i);
}
（3）輸出結果？
setTimeout(function(){
    console.log("a");
},0);
console.log("b")
setTimeout(function(){
    console.log("c");
},0);


答案（1）列印5次5//這裡由於var是全域性變數，變數提升，但是如果改成ES6標準的let就是輸出 0 1 2 3 4
    （2）每個1s列印1, 2, 3.....//同理，如果改成var，就是列印3次3
    （3）b a c

以上參考bilibiliup主，前端老貓

用這四個哥們兒做玩具

相關文章