JQuery - множественные таймауты

Question

У меня есть форма, где JQuery запускает сообщения об ошибках в зависимости от требований разных полей. Я хочу, чтобы сообщения появлялись рядом с каждым полем по мере необходимости, и я хочу, чтобы каждый из них исчезал, имел 3-секундный тайм-аут, а затем исчезал.

Но мне интересно: есть ли у кого-нибудь объект или массив, чтобы хранить все таймауты? В принципе, все ошибки в настоящее время работают с той же ссылкой на таймаут. Таким образом, если один вход вызывает ошибку, а другой - через 1 секунду после, то второе сообщение уходит через две секунды (а не 3), потому что все они относятся к одной переменной таймаута и первой настройке запуска начального таймера.

Это для формы заказа, поэтому Продукт относится к родительскому Div 'product' для ввода, на который запускается ошибка.

У меня есть что-то вроде этого:

function error_check_number(input) 
{ 
    var intRegex = /^\d+$/; 
    var product = jQuery(input).closest('div.product'); 
    if (!intRegex.test(input.val()) && input.val() != '') 
    { 
     input.val('0'); 
     if (jQuery('div.error-message', product).length <= 0) 
     { 
      var error = jQuery("<div class='error-message'>Number Values Only</div>").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(); 
     }); 
    } 
} 

Я хотел бы каждый вызов сообщение об ошибке, чтобы функционировать независимо друг от друга, насколько таймауты обеспокоены.

Answer 1

Я просто пробовал это с помощью doTimeout(), и, похоже, он работает хорошо. Любая причина, почему я не должен использовать это?

benalman.com/projects/jquery-dotimeout-plugin

function error_check_number(input) 
{ 
    var intRegex = /^\d+$/; 
    var product = jQuery(input).closest('div.product'); 
    if (!intRegex.test(input.val()) && input.val() != '') 
    { 
     input.val('0'); 
     if (jQuery('div.error-message', product).length <= 0) 
     { 
      var error = jQuery("<div class='error-message'>Number Values Only</div>").hide(); 
      error.appendTo(jQuery(product)).slideDown("fast"); 
     } 
     jQuery.doTimeout(jQuery(input).attr('name'), 3000, function(){ 
      jQuery("div.error-message", product).slideUp("fast", function() { 
       jQuery("div.error-message", product).remove(); 
     }); 
     }, true); 

    } 
    else 
    { 
     jQuery.doTimeout(jQuery(input).attr('name'), function(){ 
      jQuery("div.error-message", product).slideUp("fast", function() { 
       jQuery("div.error-message", product).remove(); 
     }); 
     }, false); 
    } 
} 

Answer 2

Попробуйте

if (!intRegex.test(input.val()) && input.val() != '') 
{ 
    input.val('0'); 
    if (jQuery('div.error-message', product).length <= 0) 
    { 
     var error = jQuery("<div class='error-message'>Number Values Only</div>"); 
     error.appendTo(jQuery(product)).slideDown("fast", function(){ 
      var timeout=setTimeout(function(){ 
       error.slideUp("fast", function() { 
        error.remove(); 
       }); 
      }, 3000); 
     }); 
    } 
} 

Я думаю, что без наглядного примера я не могу идти дальше.

Answer 3

Вот мой, непроверенные, но я думаю, что это будет работать

function error_check_number(input) { 
    var intRegex = /^\d+$/; 
    var product = jQuery(input).closest('div.product'); 
    var error_div = product.find('div.error-message'); 

    function displayError(msg, field_name) { 
     var error = $('<div class="error" id="error_for_'+field_name+'">'+msg+'</div>').hide(); 
     error.appendTo(error_div).slideDown("fast"); 

     error[0].timer = setTimeout(function(){ 
       error.slideUp("fast", function() { 
       error.remove(); 
       }); 
     }, 3000);  
    } 

    if (!intRegex.test(input.val()) && input.val() != '') { 
     input.val('0'); 
     displayError("Number Values Only"); 
    } else { 
     err = error_div.find("#error_for_"+input.attr('name')); 
     if (err[0]) { 
      clearTimeout(err[0].timer) 
      err.remove(); 
     } 
    } 
} 

Это предполагает, div.error-сообщение всегда существует. Это действует как контейнер для всех сообщений об ошибках. Он не удаляет контейнер. Если вам не нравится это поведение, вы можете просто добавить его в «div.product»