How to Display Justin Bieber Tweets with Asynchronous Recursion


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!

Andi Setiawan

Loving husband - Caring Father - Slap bet Commissionaire (I wish) find my complete profile on: http://andisetiawan.com/about-me http://facebook.com/andiim3 - http://gplus.to/andiim3 - http://andiim3.com

Share
Published by
Andi Setiawan

Recent Posts

Home Server Networking: Access Your Server Remotely

Depending on what you are trying to do, there are several approaches that you can…

2 years ago

Dedicated Blog for Dobby and Luna

Dobby and Luna have been part of our lives for the past years. They have…

4 years ago

Demo Site For My Projects

In the year 2021, I've completed some paid projects. Some of them are more technical,…

4 years ago

GlassTime – Glassmorphism WordPress Theme

Based on the GlassTime Bootstrap template, here I present glassmorphism WordPress Theme free to download.This…

5 years ago

GlassTime : Glassmorphism Responsive HTML5 Template

This HTML5 template is using Glassmorphism UI design language which is now trending for 2021…

5 years ago

Daftar Desa, Kecamatan, dan Kode Pos Buleleng – Bali

KecamatanKode POSBanjar81152Buleleng81119Busungbiu81154Gerokgak81155Kubutambahan81172Sawan81171Seririt81153Sukasada81161Tejakula81173Klik pada nama kecamatan untuk melihat daftar desa masing-masing. Sumber: kodepos.andiim3.com

5 years ago