1
\$\begingroup\$

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
      })
    });
  }
}
\$\endgroup\$
1
\$\begingroup\$
//$(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());
    }
  });
});
\$\endgroup\$
  • 1
    \$\begingroup\$ Thanks for your great answer. Two issues the first is a syntax error: 'keypress: function () {}' to 'keypress: function () {' the second is my Instagram script no longer shows just 4 images it now shows 10+ - is there any obvious reason for this? \$\endgroup\$ – thmsmxwll May 11 '13 at 9:24
  • \$\begingroup\$ @thmsmxwll thanks for the correction. As for the plugin, that I don't know. I assume your script takes in hash tags, splits them and removes the hash sign. And for each tag, fetch 4 pictures. \$\endgroup\$ – Joseph May 11 '13 at 9:30
  • \$\begingroup\$ Strange this wasn't happening for my original. Regardless, thanks for the help! Marked correct. \$\endgroup\$ – thmsmxwll May 11 '13 at 9:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.