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

Question

I created a simple rainbow in SCSS & jQuery and it works fine, only once. Can someone tell me why it doesn't execute multiple times?

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);

It's a jQuery problem? Or the animation works strange?

Answer 1

You are not clearing the interval properly.

As per the Docs

The returned timeoutID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to Window.clearInterval() to cancel the timeout.

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

so you need to pass the timeoutID refreshIntervalId in the below example to 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/