Series of repetitive content-loading functions A friend helped me put the following code together, which is made up of a series of repetitive loadContent() functions. I've just shown the first two functions but they're all the same.

The code works fine but I'm wondering if anyone could give me a tip as to how I could reduce the bloat in this code and condense the functions somehow. I read somewhere that repetitive code usually means that the code can be simplified or shortened somehow. I'm no expert at jQuery or coding so I'm not sure where to start. I'm assuming that the code could be written a lot better but I might be wrong.

function loadContent1()
    {
            $('#content1').empty();
            if(typeof(counterArray[1]) != 'undefined' &amp;&amp; counterArray[1] !=     null)clearTimeout(counterArray[1]);
            jQuery.ajax({
            type: "GET",
            url: "//cgi-bin/mggsn_ssr21.cgi",
            beforeSend:function(){
                    jQuery('#content1').append('&lt;img class="loading"     src="img/loading.gif" alt="Loading..." /&gt;');
                    jQuery('#refresh1text').html("&lt;p&gt;Loading...&lt;/p&gt;");
            }
            })
            .done(function(data){
                    if(typeof(counterArray[1]) != 'undefined' &amp;&amp; counterArray[1] != null)clearTimeout(counterArray[1]);
                    $('#content1').empty();
                    $('#content1').html(data);
                    //alert(data.slice(0.100));

                    countDownTimeArray[1]=countDownIntervalArray[1];
                    countDown(1);
            })
                    .fail(function(){
                    $('#content1').empty();
                    jQuery('#content1').html('&lt;h4&gt;failed to load content&lt;/h4&gt;' + this.url);
            });
    }

    function loadContent2()
    {
            $('#content2').empty();
            if(typeof(counterArray[2]) != 'undefined' &amp;&amp; counterArray[2] != null)clearTimeout(counterArray[2]);
            jQuery.ajax({
            type: "GET",
            url: "/cgi-bin/mtest2.cgi",
            beforeSend:function(){
                    jQuery('#content2').append('&lt;img class="loading" src="img/loading.gif" alt="Loading..." /&gt;');
                    jQuery('#refresh2text').html("&lt;p&gt;Loading...&lt;/p&gt;");
            }
            })
            .done(function(data){
                    if(typeof(counterArray[2]) != 'undefined' &amp;&amp; counterArray[2] != null)clearTimeout(counterArray[2]);
                    $('#content2').empty();
                    $('#content2').html(data);
                    //alert(data.slice(0.100));

                    countDownTimeArray[1]=countDownIntervalArray[1];
                    countDown(2);
            })
                    .fail(function(){
                    $('#content2').empty();
                    jQuery('#content2').html('&lt;h4&gt;failed to load content&lt;/h4&gt;' + this.url);
            });
    }
Joseph cleaned up the code a lot so let me point out a few things that you'll be able to use in your future code.


Consistent formatting greatly improves code readability and maintenance. There are many out there that are good starts, and I'm a fan of Google's language styles for the most part.
Since you're already depending on the definition of $, it's odd to mix it with jQuery in the same code. Pick one and stick with it.
To check that a value is neither null or undefined you can simply compare it to null using ==/!=. When you know the value cannot be some other falsy value (e.g. false, 0, or ''), you can simply use ! or the boolean context.

if (counterArray[1]) { ... }

DOM queries can be expensive on large pages, so it pays to save the results of a query if you're going to use it multiple times, and it cleans up the code. I like prefixing the name of a variable holding the results of a selector with a $ to make it clear that it's not a raw DOM element.

var $content = $('#content1');

Most jQuery methods return the selector itself, allowing you to chain multiple calls together.

$content.empty().html(data);

html completely replaces the contents of the element so there's no reason to call empty on it first. DOM manipulation causes a reflow; combine your manipulations when possible.