While focus on input check if empty

Question

I made a small function that is getting looped when an input is getting focus and stopping the loop when the input is losing focus. Now I would like to know if there is a better way to write this code.

 var timer; 
  function Change () {   
    if( !$('#eventurl').val() ) {

      $("#js-skipbutton").text('overslaan');
      console.log(0);
    }
    else{
      $("#js-skipbutton").text('ophalen');
      console.log(1);
    }
  };
  $('#eventurl').focus(function() { 
    timer = setInterval(Change, 200);
  });
  $('#eventurl').focusout(function() { 
    clearTimeout(timer);
    Change();
  });

This code is changing the text to "overslaan" on a span when the input is empty and to "ophalen" when the input is containing text.

Answer 1

You could cache $("#eventurl") and $("#js-skipbutton") so jQuery won't search those elements multiple times, that's a little speed up.

var eventulr = $(document.getElementById("eventurl"));
var js_skipbutton = $(document.getElementById("js-skipbutton"))

It's not necessary to check for focus or focusout events in an input element (specially the focusout event, that is used for event bubbling).

Instead, only check for keypress event. This way you won't be checking if the input element is empty every 200 milliseconds whether the user is pressing a key or not

eventurl.on("keypress", Change);

---

Edit

Since keypress event is not triggered when text is pasted into the input element you can listen for keyup event instead; Which is triggered whenever a key is released (Including Ctrl, Shift, etc.). Or rely on jQuery's change() method which works with input, select, textarea elements.

eventurl.change(Change);