主页 / 问题 / 844153
Accepted
Natalya
Asked:2020-06-20 06:10:51 +0000 UTC2020-06-20 06:10:51 +0000 UTC

setTimeout 在 setInterval 内，不能设置 setTimeout 间隔

  • 772

我做了一个动画：一个鬼出现又消失。而且，他在场的时间少于他不在场的时间，这正是我想要的。

但是出现的时间是不能调节的，但是，好像是取决于整个区间的时间t

var t = setInterval(function appear(){
    var ghost = document.getElementById("ghost");
    if (ghost.style.display == "none")
            {ghost.style.display = "block";}
    else
            {var t1 = setTimeout(function disappear(){
            ghost.style.display = "none";
            }, 1)}      
}, 6000)

它应该按功能消失t1。我想做的更少。延迟t1减少到1ms，但没有响应。为什么是这样？

var t = setInterval(function appear() {
  var ghost = document.getElementById("ghost");
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
  } else {
    var t1 = setTimeout(function disappear() {
      ghost.style.display = "none";
    }, 1)
  }
}, 6000)
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
<img id="ghost" src="https://isstatic.askoverflow.dev/nrYtc.png" width="280">

setinterval

2 个回答

  1. Best Answer

    您的代码的问题是您在 else 分支中编写了消失的期望。
    这意味着这个分支没有机会在当前的 setInterval 迭代中执行。

    要控制消失时间，需要在显示后立即设置setTimeout。

    第二个问题是验证：

    ghost.style.display == "none"

    这不适用于通过级联表检索到的样式（即，如果样式不是在元素本身上指定的，而是在 css 中指定的）。
    您可以手动初始化元素的样式，也可以在应用 css 后使用getComputedStyle获取实际的元素样式。

    var ghost = document.getElementById("ghost");
ghost.style.display = "none";

var t = setInterval(function appear() {
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
    // Просто убираем else
    setTimeout(function () {
      ghost.style.display = "none";
    }, 300)
  }
}, 3000)
    body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
    <img id="ghost" src="https://isstatic.askoverflow.dev/nrYtc.png" width="280">

    • 3

  2. 所以你可以通过改变变量showSeconds和的值来改变可见/不可见图像的时间间隔hideSeconds。

    var hideSeconds = 3;
var showSeconds = 1;
function switchGhost(show) {
  var ghost = document.getElementById("ghost");
  if (show) {
    ghost.style.display = "block";
    setTimeout(switchGhost, showSeconds * 1000, !show);
  } else {
    ghost.style.display = "none";
    setTimeout(switchGhost, hideSeconds * 1000, !show);
  }
}

switchGhost(false);
    body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
    <img id="ghost" src="https://isstatic.askoverflow.dev/nrYtc.png" width="280">

    • 2

相关问题