How to use setInterval() as an event listener
<p>I've never used <code>setInterval()</code> and I need some advice as I can't get my head round this. I want to create some kind of event listener.</p>

<p>Say for example I want to check the length of options in a Select Menu however a third party script populates the content of the Select Menu via an Ajax request. Unfortunatly I'm not allowed to touch the the third party script so I though about having a function that waits and listens for the content to be added and can then perform it's tasks. I'm being vauge I know... but bare with me.</p>

<p>say I have the following on my web page:</p>

<pre><code>&lt;select size="7" id="cat"&gt; &lt;/select&gt;
</code></pre>

<p>onload this gets filled with options like this: </p>

<pre><code>&lt;option value="Category 1"&gt;Category 1&lt;/option&gt;
&lt;option value="Category 2"&gt;Category 2&lt;/option&gt;
&lt;option value="Category 3"&gt;Category 3&lt;/option&gt;
&lt;option value="Category 4"&gt;Category 4&lt;/option&gt;
</code></pre>

<p>I was going to add a function that also loads onLoad (or $(document).ready() to be exact) that will listen to the length of the options and if greater than zero we wish to do something (in this example an alert)</p>

<pre><code>function checkLen(){

    if($('#cat option').size() &gt; 0){
        return true;
       }else{
        return false;
       }

}


function takeDefault(){

    var ourInterval = setInterval("checkLen();", 1000);

       if(ourInterval == true){
           alert("Okay I will do something now");
           clearInterval(ourInterval);

       }

        // Now I will perform some other tasks
}

$(document).ready(function() {
   takeDefault();
});
</code></pre>

<p>Now this just doesn't work as I don't really understand. The if(checkLen == True) condition is only done once and I need this to be done every second until the select menu is populated. Can some one please explain to me what I Nneed to do or how to position my code better. </p>
