How to Display Justin Bieber Tweets with Asynchronous Recursion
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Read Time:
1 min
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="https://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!
Advertisement
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.