Question posted in 
Solved:
I was able to solve the problem by wrapping my interior of the tweetSweep function inside a callback function (snippet below).
This works but I’d love to hear if there are other approaches available.
// URL Constructor ---------- //
tweetSweep: function() {
this.getShortUrl(function(short) {
for(var i = 0; i < s.tweets.length; i++) {
var tweet = $(s.tweets[i]);
var tweet_text = $(tweet).text();
// Build the URL
$(tweet).attr({
href: s.tweet_url + tweet_text + ' ' + short + s.tweet_source,
target: '_blank'
});
}
});
},
// URL Shortening via Bitly API ---------- //
getShortUrl: function(callback) {
var accessToken = s.bitly_key;
var url = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + accessToken + '&longUrl=' + s.post_url;
$.getJSON(url, function(response) {
callback(response.data.url);
});
}Original question:
I’m working on a small “Tweet This” plugin that will take any text wrapped in a a element with a class of .tweet-embed and build a Twitter link with the sentence and a shortened URL of the current page via the bit.ly API.
I’m calling the getShortURL function via my init function, and I’m trying to append the result of it to the href attribute of my links in the tweetSweep function (via the shorturl variable, which is currently undefined… line 39):
(function() {
/**
* Main TweetEmbed object with settings
* and helper functions to build "Tweet this"
* links around desired text.
*
* @type {Object}
*/
var TweetEmbed = {
// Settings ---------- //
settings: {
tweets: $('.tweet-embed'),
tweet_url: 'http://twitter.com/home/?status=',
tweet_source: ' — @handle',
post_url: window.location.href,
bitly_login: 'my_login_is_here',
bitly_key: 'my_key_is_here'
},
// Initialization ---------- //
init: function() {
s = this.settings;
this.tweetSweep();
this.getShortUrl(s.post_url);
},
// URL Constructor ---------- //
tweetSweep: function() {
for(var i = 0; i < s.tweets.length; i++) {
var tweet = $(s.tweets[i]);
var tweet_text = $(tweet).text();
// Build the URL
$(tweet).attr({
//href: s.tweet_url + tweet_text + s.tweet_source + shorturl,
href: s.tweet_url + tweet_text + s.tweet_source,
target: '_blank'
});
}
},
// URL Shortening via Bitly API ---------- //
getShortUrl: function(url, callback) {
var accessToken = s.bitly_key;
var url = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + accessToken + '&longUrl=' + encodeURIComponent(url);
$.getJSON(url, function(response) {
short = response.data.url;
});
}
}; // end TweetEmbed
// Fire off TweetEmbed's initialization
TweetEmbed.init();
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="tweet-embed">Test tweet here</a>When I call my getShortUrl(); function, if I type in short in the console, it will spit out the shortened URL as expected. My issue is that I can’t figure out how to use that response anywhere else in my plugin (I was trying to save it to a shorturl variable in my init to no avail)…
I’ve searched over and over and have found tons of advice for similar issues, but still haven’t been able to figure out how to apply it to my code. I’m pretty clueless when it comes to all this asynchronous and callback jazz.
2
Answers
Where are you trying to use it in your plugin exactly? One option is to use promises
https://msdn.microsoft.com/en-us/library/dn802826(v=vs.94).aspx
instead of callbacks, since $.getJSON returns a promise.
tweetSweetcan take an optionalshorturlargument, which it defaults to an empty string. Then in your$.getJSONcallback, you can calltweetSweepto update all the URLs with the response from the API.