jQuery clearInterval不适用于不同的功能

Question

有人知道，为什么clearInterval(interval)在我的脚本中不起作用？我在控制台日志中没有任何错误。我不知道为什么我不能停止间隔。

感谢您的支持。

var interval;

$(document).on('click', '#register-continue', function() {
  $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]').each(function() {
    if ($(this).val().length === 0) {
      interval = setInterval(function() {
        console.log('count')
        $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]').each(function() {
          if (($(this).val().length != 0) && (!($(this).is(':focus')))) {
            $(this).css({
              border: '1px solid #e5e5e5'
            });
          }

          if (($(this).val().length === 0) && (!($(this).is(':focus')))) {
            $(this).css({
              border: '1px solid #fe0000'
            });
          }
        });
      }, 10);
    }
  });
});

$(document).on('click', '#register-submit', function() {
  clearInterval(interval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-register-form">
  <div class="user-input">
    <input class="first-name" type="text" placeholder="Vorname">
    <input class="last-name" type="text" placeholder="Nachname">
  </div>
  <button type="button" id="register-continue" class="register">continue</button>
  <button type="button" id="register-submit" class="register">submit</button>
</div>