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

您需要在函数作用域之外定义间隔变量，以便对 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);
}