JQuery - Multiple Timeouts
<p>I have a form where JQuery fires error messages depending on the requirements of the different fields.  I want the messages to pop up next to each field as needed, and I want each to fade in, have a 3 second timeout, then fade out.</p>

<p>But Im wondering:  is there someway to have an object or an array store all the timeouts?  Basically, all the errors are currently running off the same reference to the timeout.  So if one input fires an error, and another one does 1-second after, then the second message goes away in TWO seconds (rather than 3), because it's all referring to one timeout variable, and the first firing setup the initial timer.  </p>

<p>This is for an order form, so Product refers to the parent <code>Div 'product'</code> for the input on which the error is being triggered.</p>

<p>I have something like this:</p>

<pre><code>function error_check_number(input)
{
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    if (!intRegex.test(input.val()) &amp;&amp; input.val() != '')
    {
        input.val('0');
        if (jQuery('div.error-message', product).length &lt;= 0)
        {
            var error = jQuery("&lt;div class='error-message'&gt;Number Values Only&lt;/div&gt;").hide();
            error.appendTo(jQuery(product)).slideDown("fast");
        }

        var thetime = setTimeout(function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message").remove();
        });
        }, 3000);       
    }
    else
    {
        clearTimeout(thetime);
        jQuery("div.error-message", product).slideUp("fast", function () {
            jQuery("div.error-message", product).remove();
        });
    }
}
</code></pre>

<p>I would like each call to the error message, to function independently from one another, as far as the timeouts are concerned.</p>
