How to Display Justin Bieber Tweets with Asynchronous Recursion
Tutorial Details
- Topic: Justin Bieber News (or JavaScript)
- Estimated Difficulty: Intermediate
- Format: 20 Minute Screencast
Bottom line: Justin Bieber = traffic. I fully intend to use this to my advantage, and none of you can do anything about it. The purpose of today’s video tutorial is to demonstrate how to use a scary set of words, “asynchronous recursion” to continuously display updated tweets about the great Biebster. And then finally, we’ll hijack these tweets to make them look as if they’re referring to Nettuts+ instead.
The Full Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Biebster</title>
</head>
<body>
<h2> Latest Biebster Tweets </h2>
<ul id="tweets"> </ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
(function() {
var UpdatePanel = {
init : function(options) {
this.options = $.extend({
interval : 5000,
number : 3,
hijackTweet : false
}, options);
this.updater();
},
updater : function() {
(function updateBox() {
this.timer = setTimeout(function() {
updateIt();
updateBox();
}, UpdatePanel.options.interval);
})();
// get the ball rolling
updateIt();
function updateIt() {
$.ajax({
type : 'GET',
url : UpdatePanel.options.url,
dataType : 'jsonp',
error : function() {},
success : function(results) {
var theTweets = '',
elem = UpdatePanel.options.elem.empty();
$.each(results.results, function(index, tweet) {
if ( UpdatePanel.options.hijackTweet ) {
tweet.text = tweet.text.replace(/(Justin )?Bieber/ig, 'Nettuts');
}
if ( index === UpdatePanel.options.number ) {
return false;
}
else {
theTweets += '<li>' + tweet.text + '</li>';
}
});
elem.append(theTweets);
}
});
}
},
clearUpdater : function() {
clearTimeout(this.timer);
}
};
window.UpdatePanel = UpdatePanel;
})();
UpdatePanel.init({
interval : 5000,
number : 5,
url : "http://search.twitter.com/search.json?q=bieber",
elem : $('#tweets'),
hijackTweet : true
});
</script>
</body>
</html>
Conclusion
Thanks for watching; I hope you enjoyed it! Stay tuned to Nettuts+ for more news and gossip on Justin Bieber!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
- nate8nate
- Anony Mouse
- Steph
- Connor Crosby
- http://spotdex.com Davidmoreen
- http://www.blackleafmedia.com/ Patrick
- Eduardo
- http://newarts.at Drazen Mokic
- http://www.james-harding.com James Harding
- Rodolfo Palma
- http://www.twitter.com/TylorSkory Tylor Skory
- http://graphicriver.net?ref=crozer Christopher
- http://www.ecustom.ca/ Damon Bridges
- tigerlabs
- Jeffrey Way
- http://www.ecustom.ca/ Damon Bridges
- Derrick
- Al
- http://amosrivera.com Amos
- http://www.seowisedesigns.com Yheng
- Alexander
- David
- Dan Stever
- http://www.wbcobb.net william
- http://www.ae.tutsplus.com Adam Everett Miller
- arnold
- http://benstockdesign.com Ben Stock
- Luis
- http://wpcanyon.com Boba
- Djkanna
- http://www.derekloewen.com Derek Loewen
- http://www.jsxtech.com Jaspal Singh
- http://its-aim.co.cc idraki M
- http://net.tutsplus.com Jeffrey Way
- http://smallbitsofcode.com Boba
- http://www.lajmar.com John Ramirez
- Jakub Cech
- xRommelx
- Boba
- http://www.designmango.com DesignMango
- Tom
- http://net.tutsplus.com Jeffrey Way
- Max
- Jon
- Shadow
- Derrick
- sky
- No Longer Here
- grudgee
- http://sideradesign.com paul
- JW
- http://themeforest.net/user/crozer?ref=crozer Christopher
- http://jayj.dk/ Jay
- Xurion
- http://www.wdonline.com Jeremy
- http://www.streuper.com Justin Streuper
- http://www.sz-media.org Sz-Media
- Ben Stav
- max
- http://www.seosheffield.org Ed Baxter
- http://artmadefresh.com Terrence Campbell
- http://www.carlwalker.me Carl Walker
- http://smallbitsofcode.com Boba
- Alex
- http://pixelcoder.co.uk Alistair
- Tyler
- http://www.codeforest.net/ Codeforest