的Javascript clearInterval

Question

仍然得到的JavaScript的竅門，我不知道我怎麼做..

我使用的時間間隔在頁面上發送錯誤和成功的消息，並遇到了一些問題。

比方說，我有以下幾點：

function setMyInterval(element) { 
    var timer = setInterval(function() { 
     // add some child nodes to element 
     // play with the css 
    }, 20); 
    return timer; 
} 

function callMyInterval() { 
    var parent = document.getElementById("element"); 
    var myIntervalRef; 
    if(!parent.firstChild) { 
     myIntervalRef = setMyInterval(parent); 
    } else { 
     clearInterval(myIntervalRef); 
     while(parent.firstChild) { 
      parent.removeChild(parent.firstChild); 
     } 
     myIntervalRef = setMyInterval(parent); 
    } 
} 

<button onclick="callMyInterval();" >Reset</button> 

我怎麼會清除這種情況下，間隔？我已經嘗試了以上幾個變體，但沒有成功。我認爲這個問題是由於myIntervalRef沒有引用前面的函數調用，但不知道如何解決這個問題。

感謝所有在先進的！

Answer 1

很簡單，將您的myIntervalRef作爲全局訪問函數執行。這樣做將使允許其他功能訪問它並對其進行更改。

// Moving the function reference outside of the method, so other function can access it. 

var myIntervalRef; 

function setMyInterval(element) { 
    var timer = setInterval(function() { 
     // add some child nodes to element 
     // play with the css 
    }, 20); 
    return timer; 
} 

function callMyInterval() { 
    var parent = document.getElementById("element"); 
    if(!parent.firstChild) { 
     myIntervalRef = setMyInterval(parent); 
    } else { 
     clearInterval(myIntervalRef); 
     while(parent.firstChild) { 
      parent.removeChild(parent.firstChild); 
     } 
     myIntervalRef = setMyInterval(parent); 
    } 
} 

<button onclick="callMyInterval();" >Reset</button> 

希望這會有所幫助。

Answer 2

在您的代碼：

var myIntervalRef; 

是您的函數的局部變量，使其全球是修復

Answer 3

您需要定義的功能範圍之外的區間變量，以便後續調用最快的方法到callMyInterval將引用相同的實例。

你在函數的局部範圍內定義它這麼callMyInterval每次調用將把一個新的變量實例，所以你不會得到參考前面的計時器。

var myIntervalRef; 

function callMyInterval() { 
    var parent = document.getElementById("element"); 
    if (parent.firstChild) { 
    clearInterval(myIntervalRef); 
    while (parent.firstChild) { 
     parent.removeChild(parent.firstChild); 
    } 
    } 
    myIntervalRef = setMyInterval(parent); 
}