setInterval odd (buggy?) behavior within a $(document).ready(function() { ... }); block
<p>Let me start here. At w3cshools.com - <a href="http://www.w3schools.com/jsref/met_win_setinterval.asp" rel="nofollow">http://www.w3schools.com/jsref/met_win_setinterval.asp</a> - they have a snippet demo-ing how to use javascript setInterval function (surprisingly it has a mismatched &lt;/form&gt; but thats beside the point). </p>

<p>I needed to use setInterval() and at times I like referring to some "standard" body to take a glimpse of the recommended usage. In my development environment, something seems to be mangling setInterval() behavior/working when I use it within a jquery <strong>$(document).ready(function() { ... });</strong> block.</p>

<p><strong>Illustration 1 - WORKS:</strong> Typical/Traditional &lt;script&gt; block</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var refreshIntervalId;

    function testMessage() {
        window.alert("Hello");
    }
    refreshIntervalId = setInterval("testMessage()", 5000);
&lt;/script&gt;
</code></pre>

<p><strong>Illustration 2 - DOES NOT WORK:</strong> jQuery block</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        var refreshIntervalId;

        function testMessage() {
            window.alert("Hello");
        }
        refreshIntervalId = setInterval("testMessage()", 5000);
    });
&lt;/script&gt;
</code></pre>

<p><strong>Illustration 3 - WORKS:</strong>
jQuery block - using setInterval(testMessage, 5000) instead of setInterval("testMessage()", 5000)</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        var refreshIntervalId;

        function testMessage() {
            window.alert("Hello");
        }
        refreshIntervalId = setInterval(testMessage, 5000);
    });
&lt;/script&gt;
</code></pre>

<p>It turns out that if I try to pass the function as a string from with the <strong>$(document).ready(function() {});</strong> block, I get an error indicating that the function is not defined. Just so we dont get side-tracked IE, Chrome, and Firefox all report errors:</p>

<p><strong>IE</strong>: Microsoft JScript runtime error: The value of the property 'testMessage' is null or undefined, not a Function object</p>

<p><strong>Chrome</strong>: Uncaught ReferenceError: testMessage is not defined (anonymous function)</p>

<p><strong>Firefox</strong>: testMessage is not defined.</p>

<p>What I would like to find out (if possible) is, could this be a result of standards non-conformance or what be going wrong when I try to use <strong>setInterval("testMessage()", 5000)</strong> from within the jQuery block? Could some mangling be happening or is this the right behavior?</p>
