javascript - 谁能告诉我为什么这一次有效？

Question

我用 SCSS 和 jQuery 创建了一个简单的彩虹，它工作正常，只有一次。有人能告诉我为什么它不执行多次吗？

JS

function Raibow() {
  $('#rainbow').show();

  setTimeout(function() {
    $('#rainbow .rainbow').addClass('rainbow-effect');
  }, 100);

  $n = 5; $('#rainbow-timing').text($n);
  setTimeout(function() {
    $('#rainbow-message').show('fade', 400);
  }, 900);

  setTimeout(function() {
    function count() {
      $n--;
      if ($n <= 0) {
        $('#rainbow-message').hide('fade', 400);
        $('#rainbow .rainbow').removeClass('rainbow-effect');
        setTimeout(function() { 
            $('#rainbow-timing').text($n); 
        }, 200);
        setTimeout(function() { 
            $('#rainbow').hide(); 
        }, 1000);
        clearInterval($n);
        return;
      }
      $('#rainbow-timing').text($n);
    }
    setInterval(count, 1000);
  }, 1400);
}

$('button').click(Raibow);

这是一个 jQuery 问题吗？或者动画效果很奇怪？

Answer 1

您没有正确清除间隔。

根据文档

返回的 timeoutID 是一个非零数字值，它标识通过调用 setInterval() 创建的计时器；可以将此值传递给 Window.clearInterval() 以取消超时。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

因此您需要将下面示例中的 timeoutID refreshIntervalId 传递给clearinterval()

 var refreshIntervalId;

   function count() {
      $n--;
      if ($n <= 0) {
        $('#rainbow-message').hide('fade', 400);
        $('#rainbow .rainbow').removeClass('rainbow-effect');
        setTimeout(function() { 
            $('#rainbow-timing').text($n); 
        }, 200);
        setTimeout(function() { 
            $('#rainbow').hide(); 
        }, 1000);
        clearInterval(refreshIntervalId);
        return;
      }
      $('#rainbow-timing').text($n);
    }

  setTimeout(function() {
    refreshIntervalId =  setInterval(count, 1000);
  }, 1400);

fiddle :https://jsfiddle.net/405zqzef/