显示/隐藏从服务器到用户的消息和重置计时器的最佳方法?

时间:2018-03-14 16:00:09

标签: javascript jquery delay jquery-queue

我一直在使用JQuery和Bootstrap 3.在我的登录表单上,我有选项,用户可以点击忘记密码链接。这将打开Modal框,他们可以输入他们的电子邮件并提交该表单。然而,这一切都很好,但我有一件事,我真的不喜欢。因此,假设用户输入电子邮件并发送请求,如果电子邮件不正确,他们将在屏幕上看到带有红色警告框的消息。我把它设置为显示15秒然后消失。因此,如果用户敌人立即尝试再次输入电子邮件并且消息返回计时器不会重置。他们将看到该消息,因为计时器已经从上一条消息计算了10秒,因此可以说是5秒。我不确定解决这个问题的最佳选择是什么。我使用JQuery delay()设置计时器,fade()添加对元素的影响。以下是我的代码示例:

$('#Forgot-Form').on('submit', function(e){
    e.preventDefault(); 
    var frmEmail = $.trim($('#user-email').val());

    $.ajax({
        type: 'POST',
        url: 'Functions.cfc?method=checkAccount',
        data: {'email':frmEmail},
        dataType: 'json'
    }).done(function(obj){
        if(obj.STATUS == "200"){
           $('#accountBox').removeClass().addClass('alert alert-success').show().html('<stron>Success!</strong>').delay(15000).fadeOut('slow').queue(function(){
                 $(this).removeClass('alert alert-success').dequeue();
            });
        }else{
           $('#accountBox').removeClass().addClass('alert alert-danger').show().html('<strong>Error!</strong>').delay(15000).fadeOut('slow').queue(function(){
                $(this).removeClass('alert alert-danger').dequeue();
            });
        }
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);
    });
});

我使用.dequeue()删除了类,但是在延迟超时后会发生这种情况。如果有人知道处理这些情况的更好选择,请告诉我。

0 个答案:

没有答案