Почему переменная за пределами обработчика события keyup проверяется через раз?

Есть форма для ввода ссылки. В режиме реального времени проверяем, что пользователь начал писать ссылку с http:// или https://. Задал переменной hyper = RegExp и подставил в условие через test(), которое находится в функции обработчика keyup.
Для наглядности отдельный элемент будет менять цвет на зеленый если true и на красный - false.
Вопрос такой.
Если переменную объявить внутри функции обработчика, то все нормально. Т.е. когда мы ввели http://, то далее блок всегда зеленый, но мне нужна глобальная переменная, т.к. нужно эту же переменную подставить в другой обработчик и как то не красиво будет если ее множить.
А глобальная начинает "мигать", когда мы ввели http:// и продолжили ввод. Поясните это поведение и посоветуйте как вывернуть так, чтобы нормально отрабатывало с глобальной переменной.

Посмотреть здесь.

<div class="card-body">
  <form action="">
  <input tyle='text' id='long-link' name="link">
  </form>
</div>

var long = $('#long-link'), hyper = new RegExp ('^https://|^http://','g');
  long.keyup(function(){
    if (hyper.test(long.val()))  {
      $('.card-body').css({'background':'#4cfa76'});
    }
    else $('.card-body').css({'background':'#af1d1d'});
  });