Question

就在不久之前，我问了一个问题，为什么我的setInterval（）函数只运行一次，

JS setInterval() only runs once when animating opacity

我有回答，但后来我想检查并确保循环停止，所以我在循环中添加了一个alert（）并发现clearInterval没有清除，即使我最初运行连接到全局的setInterval函数变量...

不透明度更改工作正常，但现在警告框在您单击“确定”后无限地继续...最终我将不需要警报功能我只是想看看是否实际清除了它没有...

var run;
var runOpt;

document.getElementById('menu-1-A').style.opacity=0;
document.getElementById('menu-1-B').style.opacity=0;

function openSubMenu1(item) {
    runOpt=item;
    run = setInterval(runSubMenu1,35);
}

function runSubMenu1()  {

    var i=document.getElementById('menu-1-'+runOpt);

    if (parseInt(i.style.opacity) == 1) {
      clearInterval(run);
      alert('done');

    } else {
      i.style.opacity = parseFloat(i.style.opacity) + .1;
    }
}

Answer 1

谢谢plalx - openSubMenu1（）是从onmouseover运行的，它反复调用openSubMenu1（），我创建了一个变量来测试菜单是否打开，如果是openSubMenu1（）在调用setInterval（）之前返回false。

现在它只运行一次。感谢。

Answer 2

可能发生的事情是你在第一个setInterval结束之前启动了多个实例，所以clearTimeout在被调用时有错误的引用。

以下使用闭包而不是全局变量，因此每个调用都有自己的超时引用：

<div id="d0">jere</div>

<script>

var makeOpaque = (function() {
  var timeout, el;

  return function(id) {

    if (!el) {
      el = document.getElementById(id);
      timeout = setInterval(makeOpaque, 50)

    } else if (el && el.style.opacity < 1) {
      el.style.opacity = +el.style.opacity + 0.1;

      // debug
      console.log(el.id + ' : ' + el.style.opacity);

    } else {
      timeout && clearInterval(timeout);
      alert('done');
    }
  }
}());

makeOpaque('d0');

JS clearInterval（）不会清除

2 个答案: