jQuery form preview using the Instagram plugin

Question

How can I improve my jQuery form preview implementation? I'm currently using the jQuery Instagram Plugin to get the hashtag from Instagram.

var timeoutReference;
var element;
var tagsa;

$(document).ready(function() {
  $('input#instagram_hashtag_hashtag').keypress(function() {
    if (timeoutReference) clearTimeout(timeoutReference);

      timeoutReference = setTimeout(function() {
        doneTyping($('input#instagram_hashtag_hashtag').val());
      }, 350);

    });
    $('input#instagram_hashtag_hashtag').blur(function(){
        doneTyping($('input#instagram_hashtag_hashtag').val());
    });
});

function doneTyping(tags){
  if (!timeoutReference){
    return;
  }

  tagsa = null;
  tagsa = tags.match(/(^#|\s#)([a-z0-9]+)/gi); 

  timeoutReference = null;

  var length = tagsa.length,
    element = null;
  for (var i = 0; i < length; i++) {
    element = tagsa[i];
    $(function(){
      var
        insta_container = $(".instagram")
      , insta_next_url

      insta_container.instagram({
        hash: element.replace("#", "") 
      , clientId: 'instagramclientid' 
      , show : 4
      })
    });
  }
}

Answer 1

//$(document).ready(fn) can be shortened to $(fn)
//you can use it to avoid global scope pollution so we place everything in here
$(function () {

  //IDs are unique, so we drop input
  //cache values that are static and used more than once
  var instagramHashtag = $('#instagram_hashtag_hashtag');
  var pattern = /(^#|\s#)([a-z0-9]+)/gi;
  var instaContainer = $('.instagram');
  var timer;

  function doneTyping(tags) {

    //why create the timer check? besides, if the function was called and
    //tags was blank, the loop wouldn't run since there are no matches

    //these variables are only used here, so declare them in here
    var tagsa = tags.match(pattern);
    var length = tagsa.length;
    var i = 0; 

    while(i < length) {
      instaContainer.instagram({
        hash: tagsa[i++].replace('#', ''),
        clientId: 'instagramclientid',
        show: 4
      });
    }
  }

  //use jQuery on, which accepts a map of events
  //that way, you write the selector part only once
  instagramHashtag.on({
    keypress: function () {
      if(timer) clearTimeout(timer);
      timer = setTimeout(function () {
        doneTyping(instagramHashtag.val());
      }, 350);
    },
    blur: function () {
      doneTyping(instagramHashtag.val());
    }
  });
});