es6如何清除定時器

今天小編給大家分享一下es6如何清除定時器的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

兩種方法：1、用clearTimeout()清除setTimeout定時器，語法“clearTimeout(定時器返回值)”；2、clearInterval()清除setInterval定時器，語法“clearInterval(返回值)”。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

JS的兩種定時器

window.setTimeout([function],[interval])

設置一個定時器，并且設定了一個等待的時間，當到達時間后，執行對應的方法，當方法執行完成定時器停止。

window.setInterval([function],[interval])

設置一個定時器，并且設定了一個等待的時間，當到達時間后，執行對應的方法。

當方法執行完成，定時器并沒有停止，以后每隔這么長的時間都會重新的執行對應的方法，直到我們手動清除定時器為止。

注意：setTimeout() 只執行 code 一次。如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

定時器返回值

JS中的定時器是有返回值的，返回值是一個數字，代表當前是第幾個定時器。

var timer1=window.setTimeout(function(){},1000);  //timer1->1 當前是第一個定時器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 當前是第二個定時器
var timer3=window.setTimeout(function(){},1000);   //timer3->3 當前是第三個定時器

需要注意的是，定時器即使清除了，其返回值也不會清除，之后設置的定時器的返回值也會在其返回值的基礎上繼續向后排。

怎么清除定時器

若不及時清理定時器，可能會導致內存溢出的風險。所以當我們在使用定時器的時候，就需要考慮在合適的時間清除。

清除定時器有兩個函數：

• setTimeout的銷毀函數為clearTimeout

• setInterval的銷毀函數為clearInterval

setInterval對象或setTimeout對象，這兩種定時器對象只會隨著窗口對象的銷毀才從棧空間回收。無法通過更改變量的指針指向null的方式通知垃圾回收機自動回收。如果打算在窗口對象關閉之前銷毀窗口對象的棧內存中的setInterval對象只能通過clearInterval銷毀它

clearTimeout(id_of_settimeout)

定義：阻止/取消 setTimeout() 方法設置的定時執行函數。

參數：id_of_settimeout是調用 setTimeout() 函數時所返回的ID值，使用該返回標識符作為參數，可以取消該 setTimeout() 所設定的定時執行操作。

注意: 要使用 clearTimeout(id_of_setinterval) 方法, 在創建執行定時操作時要使用全局變量：

var myVar = setTimeout(function(){ alert("Hello"); }, 3000);
clearTimeout(myVar);

• 是否需要及時清理setTimeOut

function testTimeout () {
	console.log('1111')
	console.log(setTimeout(testTimeout, 3000));
}

上面代碼在遞歸調用testTimeout，然而setTimeout會一直生成setTimeout對象；雖然會被GC回收但時間不確定，這樣做比較危險，可能會導致內存溢出。

所以我們應該在每次 setTimeout 之前調用 clearTimeout，防止不斷創建setTimeout對象而未被GC回收。

var timeHandle = null;
function testTimeout () {
    if (timeHandle) {
    	// 調用之前，先清理，防止一直生成對象
    	// ps. setInterval 定時器也應該按這種模式處理
    	clearTimeout(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setTimeout(testTimeout, 3000));
}

clearInterval(id_of_setinterval)

定義： 可取消/停止由 setInterval() 函數設定的定時執行操作。

參數：id_of_setinterval是調用 setInterval() 函數時所返回的 ID 值，只有使用該返回標識符作為參數，才可以取消該 setInterval() 所設定的定時執行操作。

注意: 要使用 clearInterval() 方法, 在創建執行定時操作時要使用全局變量：

var myVar = setInterval(function(){ myTimer() }, 1000);
clearInterval(myVar);

• 是否需要及時清理setInterval

function testInterval () {
	console.log('1111')
	console.log(setInterval(testInterval, 3000));
}

上面代碼在遞歸調用testInterval，然而setInterval會一直生成setInterval對象；雖然會被GC回收但時間不確定，這樣做比較危險，可能會導致內存溢出。

所以我們應該在每次 setInterval 之前調用 clearInterval，防止不斷創建setInterval對象而未被GC回收。

var timeHandle = null;
function testInterval () {
    if (timeHandle) {
    	// 調用之前，先清理，防止一直生成對象
    	clearInterval(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setInterval(testInterval, 3000));
}

擴展知識：使用setTimeout模擬setInterval行為

通常情況下：遞歸的方式使用setTimeOut()，效果相當于使用setInterval()

好處：

• 簡化代碼

• 保證異步隊列的函數調用順序的精準度，setInterval的缺陷會導致數據量大的時候，異步隊列的函數調用出現執行順序的錯亂。比如這個函數還沒執行完又開始執行下一個，遞歸則不會，遞歸是當前函數執行完才在棧空間遞歸創建函數的下一個實體并調用。

//實現的方法挺簡單的 ，如下代碼
//參數： 毫秒  需要執行的方法
function console1() {
    console.log(111);
    if(timer){
        clearTimeout(timer);
    }
    timer = setTimeout(function(){
        console1();
    }, 3000);
}
console1()

以上就是“es6如何清除定時器”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。