Question

我在SCSS＆amp; amp;创建了一个简单的彩虹。 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);

小提琴：https://jsfiddle.net/405zqzef/

谁能告诉我为什么这个工作一次？

1 个答案: