JS 中的定時器 setTimeout()

setTimeout()接受兩個參數：要執行的代碼和以毫秒錶示的時間。第一個參數可以是一個包含JS代碼的字符串（和在eval()函數中使用的字符串一樣），也可以是一個函數。如下：

//不建議傳遞字符串
setTimeout("alert('hello')", 1000);
//推薦的方式
setTimeout(function () {
  alert("hello");
}, 1000);

即使兩種方法都可以實現，但由於傳遞字符串可能導致性能損失，因此建議第一個參數爲函數。

 

 

任務隊列：

JS是一個單線程序的解釋器，一段時間內只能執行一段代碼，因此就有了一個JS任務隊列。這些任務會被按照它們添加到隊列的順序執行。如下：

function btn () {
    setTimeout(function () {
        for (let i=0; i<99999; i++) console.log(i);
    },980);
    setTimeout(function () {
        console.log("2");
    },1000)
}

可以看出，如果隊列是空的，則添加的代碼會立即執行，否則，就要等前面的代碼執行完後再執行。

看下面的例子：

function btn () {
    console.log(111);
    setTimeout(function () {console.log(222)}, 2000);
    setTimeout(function () {console.log(333)}, 0);
    console.log(444);
}

輸出結果：

即使設置時間爲0，但它仍然要排隊，直到函數中其它非延遲語句被執行完畢後纔開始執行隊列中的代碼。所以“333”在“444”後面。

 

 

取消調用：

setTimeout()會返回一個數值ID，這個ID爲計劃執行代碼的唯一標識符，可以用它來取消超時調用。

取消尚未執行的超時調用計劃，用clearTimeout()方法。如下：

var timeId = null;
timeId = setTimeout(function () {alert("okok")}, 2000);
clearTimeout(timeId);

任務並未執行便被取消。