es6如何清除定時(shí)器

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

華寧網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),華寧網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為華寧1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的華寧做網(wǎng)站的公司定做！

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

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

JS的兩種定時(shí)器

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

設(shè)置一個(gè)定時(shí)器，并且設(shè)定了一個(gè)等待的時(shí)間，當(dāng)?shù)竭_(dá)時(shí)間后，執(zhí)行對(duì)應(yīng)的方法，當(dāng)方法執(zhí)行完成定時(shí)器停止。

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

設(shè)置一個(gè)定時(shí)器，并且設(shè)定了一個(gè)等待的時(shí)間，當(dāng)?shù)竭_(dá)時(shí)間后，執(zhí)行對(duì)應(yīng)的方法。

當(dāng)方法執(zhí)行完成，定時(shí)器并沒(méi)有停止，以后每隔這么長(zhǎng)的時(shí)間都會(huì)重新的執(zhí)行對(duì)應(yīng)的方法，直到我們手動(dòng)清除定時(shí)器為止。

注意：setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。

定時(shí)器返回值

JS中的定時(shí)器是有返回值的，返回值是一個(gè)數(shù)字，代表當(dāng)前是第幾個(gè)定時(shí)器。

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

需要注意的是，定時(shí)器即使清除了，其返回值也不會(huì)清除，之后設(shè)置的定時(shí)器的返回值也會(huì)在其返回值的基礎(chǔ)上繼續(xù)向后排。

怎么清除定時(shí)器

若不及時(shí)清理定時(shí)器，可能會(huì)導(dǎo)致內(nèi)存溢出的風(fēng)險(xiǎn)。所以當(dāng)我們?cè)谑褂枚〞r(shí)器的時(shí)候，就需要考慮在合適的時(shí)間清除。

清除定時(shí)器有兩個(gè)函數(shù)：

setTimeout的銷(xiāo)毀函數(shù)為clearTimeout
setInterval的銷(xiāo)毀函數(shù)為clearInterval

setInterval對(duì)象或setTimeout對(duì)象，這兩種定時(shí)器對(duì)象只會(huì)隨著窗口對(duì)象的銷(xiāo)毀才從?？臻g回收。無(wú)法通過(guò)更改變量的指針指向null的方式通知垃圾回收機(jī)自動(dòng)回收。如果打算在窗口對(duì)象關(guān)閉之前銷(xiāo)毀窗口對(duì)象的棧內(nèi)存中的setInterval對(duì)象只能通過(guò)clearInterval銷(xiāo)毀它

clearTimeout(id_of_settimeout)

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

參數(shù)：id_of_settimeout是調(diào)用 setTimeout() 函數(shù)時(shí)所返回的ID值，使用該返回標(biāo)識(shí)符作為參數(shù)，可以取消該 setTimeout() 所設(shè)定的定時(shí)執(zhí)行操作。

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

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

是否需要及時(shí)清理setTimeOut

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

上面代碼在遞歸調(diào)用testTimeout，然而setTimeout會(huì)一直生成setTimeout對(duì)象；雖然會(huì)被GC回收但時(shí)間不確定，這樣做比較危險(xiǎn)，可能會(huì)導(dǎo)致內(nèi)存溢出。

所以我們應(yīng)該在每次 setTimeout 之前調(diào)用 clearTimeout，防止不斷創(chuàng)建setTimeout對(duì)象而未被GC回收。

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

clearInterval(id_of_setinterval)

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

參數(shù)：id_of_setinterval是調(diào)用 setInterval() 函數(shù)時(shí)所返回的 ID 值，只有使用該返回標(biāo)識(shí)符作為參數(shù)，才可以取消該 setInterval() 所設(shè)定的定時(shí)執(zhí)行操作。

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

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

是否需要及時(shí)清理setInterval

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

上面代碼在遞歸調(diào)用testInterval，然而setInterval會(huì)一直生成setInterval對(duì)象；雖然會(huì)被GC回收但時(shí)間不確定，這樣做比較危險(xiǎn)，可能會(huì)導(dǎo)致內(nèi)存溢出。

所以我們應(yīng)該在每次 setInterval 之前調(diào)用 clearInterval，防止不斷創(chuàng)建setInterval對(duì)象而未被GC回收。

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

擴(kuò)展知識(shí)：使用setTimeout模擬setInterval行為

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

好處：

簡(jiǎn)化代碼
保證異步隊(duì)列的函數(shù)調(diào)用順序的精準(zhǔn)度，setInterval的缺陷會(huì)導(dǎo)致數(shù)據(jù)量大的時(shí)候，異步隊(duì)列的函數(shù)調(diào)用出現(xiàn)執(zhí)行順序的錯(cuò)亂。比如這個(gè)函數(shù)還沒(méi)執(zhí)行完又開(kāi)始執(zhí)行下一個(gè)，遞歸則不會(huì)，遞歸是當(dāng)前函數(shù)執(zhí)行完才在?？臻g遞歸創(chuàng)建函數(shù)的下一個(gè)實(shí)體并調(diào)用。

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

以上就是“es6如何清除定時(shí)器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：es6如何清除定時(shí)器
標(biāo)題鏈接：http://www.muchs.cn/article0/ghgsoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、企業(yè)建站、小程序開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容