javascript - 如何使用Jquery无限期地刷新HTML中的标签

在网页中，我正在写一个用户在玩游戏，一旦他们赢了，文本就会闪烁。一旦用户点击重新启动，文本就会闪烁。我想知道如何使用Jquery（我必须使用jquery作为要求）来做到这一点？

谢谢您的帮助！

最佳答案

以下是我认为可以满足您需求的摘录。

这取决于setInterval和clearInterval来处理切换CSS类的重复回调。您可以使用更多的CSS动画/转场来增加效果。

(function() {
  var flasherInterval = 0,
    $flasher = $('#flasher');

  $('#win').on('click', function() {
    if (!flasherInterval) {
      flasherInterval = setInterval(function() {
        $flasher.toggleClass('hidden');
      }, 250);
    }
  });

  $('#restart').on('click', function() {
    console.log(flasherInterval);
    clearInterval(flasherInterval);
    if (!$flasher.hasClass('hidden')) {
      $flasher.toggleClass('hidden');
    }
    flasherInterval = 0;
  });
}());

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="win">Win</button>
<button id="restart">Restart</button>

<p id="flasher" class="hidden">Flashing text!</p>