# jQuery form preview using the Instagram plugin

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 }) }); } }  ## 1 Answer //$(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());
}
});
});

• 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? – thmsmxwll May 11 '13 at 9:24
• @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. – Joseph May 11 '13 at 9:30
• Strange this wasn't happening for my original. Regardless, thanks for the help! Marked correct. – thmsmxwll May 11 '13 at 9:33