javascript - 如果 30s 没有点击，应用一次 CSS，移除它，并重新迭代

Question

所以我有这个时髦的小东西 CodePen带有我希望仅在用户未单击 <div class="someDiv"> 时才运行的动画持续 30 秒。

我想问的是，有人能给我指出正确的方向吗，所以当有人没有点击时:

<div class="someDiv">
</div>

..持续 30 秒，此 CSS 将通过附加 id 应用(一次)，类似于 $(".someDiv").attr("id", "#theBounce");并以相反的方式将其删除。

#theBounce {
  background-color:red;
  width:50px;
  height:50px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5%;

  -moz-animation: bounce 1.5s infinite;
  -webkit-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

意思是单击将强制脚本计数器重新开始，如果没有单击 30 秒，将应用 CSS 至少 1.5 秒，然后将其删除，然后启动计时器。这可能是我的谷歌搜索技能出了问题，但我就是想不通如何让它发挥作用。 这是我还没有真正弄明白的点击部分的计时/重置。

一个链接，一个想法，一个建议。我会为这一切感到高兴。谢谢。

Answer 1

我建议你使用 setTimeout。

在文档加载时，通过定义一个等于计时器的变量来启动您的 setTimeout，该变量会在一定的毫秒数后添加您的内容。然后将您的计时器变量重新定义为一个新的 setTimeout，持续新的毫秒数。

var myTimer;
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000);

然后，如果有人做了一些事情来停止计时器，您可以通过以下方式停止计时器:

clearTimeout(myTimer);

这是一个例子:

(function () {
  var myTimer,
      announce = document.getElementById("announcement"),
      button = document.getElementById("stopIt");
  function firstTimer () {
      announcement.innerHTML = '';
      myTimer = setTimeout(function () {
          populateContent();
      }, 500);
  }
  function populateContent () {
      announcement.innerHTML = 'push the button!!';
      myTimer = setTimeout(function () {
          firstTimer();
      }, 500);
  }
  button.addEventListener('click', function () {
    clearTimeout(myTimer);
  });
  firstTimer();
}());

#announcement {
  border: 1px solid red;
  height: 5ex;
  width: 30%;
}

<div id="announcement"></div>
<button type="button" id="stopIt">Stop!!</button>