首頁 > 文章 > web前端 > es6怎麼清除定時器

es6怎麼清除定時器

青灯夜游原創: 2022-04-13 15:12:157263瀏覽

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

es6怎麼清除定時器

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

JS的兩個計時器

#window.setTimeout([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(&#39;1111&#39;)
	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(&#39;1111&#39;);
	console.log(timeHandle = setTimeout(testTimeout, 3000));
}

clearInterval(id_of_setinterval)

#定義：可取消/停止由 setInterval() 函數設定的定時執行操作。
注意: 要使用clearInterval() 方法, 在建立執行定時操作時要使用全域變數：
```
var myVar = setInterval(function(){ myTimer() }, 1000);
clearInterval(myVar);
```

是否需要及時清理setInterval #

function testInterval () {
	console.log(&#39;1111&#39;)
	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(&#39;1111&#39;);
	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()

###【相關推薦：###javascript影片教學###、###web前端###】###

以上是es6怎麼清除定時器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript ecmascript es6 NULL 标识符全局变量递归指针栈 JS function 对象异步

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：修飾器是es6還是es7的特性下一篇：修飾器是es6還是es7的特性

看更多