Javascript 背景颜色转换并在 HTTP 响应上重置

Question

我正在使用 Firefox 中的 ajax 向服务器发出 POST 请求。输入只是 div 中包含的框中的一些文本输入:

<div id="mydiv">
    ...stuff...
</div>

如果请求成功，我会调用处理程序来反射(reflect)该状态。如果请求有误，我会调用不同的处理程序。

$.ajax({
    type: 'POST',
    data: my_json,
    dataType: "json",
    url: "/my/url",
    success: function(result, status, xhr) {
        success_callback();
    },
    error: function(xhr) {
        error_callback();
    }

});

成功回调没有做太多事情。在错误回调中，我想将背景颜色属性更改为红色以直观地指示错误，然后淡出回原始背景颜色(例如白色)。

瞬间改变颜色很容易:

function success_callback() {

    var element = document.getElementById('mydiv');
    element.style.backgroundColor = "white";

}

function error_callback() {

    var element = document.getElementById('mydiv');
    element.style.backgroundColor = "red";

}

我尝试使用 CSS 动画进行淡入淡出，例如

CSS

.div.error {
     -webkit-animation-duration: 3s;
     -webkit-animation-name: error;
     animation-duration: 3s;
     animation-name: error;
} 
@-webkit-keyframes error {
    from {
        background-color: red;
    }
    to {
        background-color: white;
    }
}

然后在 JavaScript 中添加错误类:

JS

function error_callback() {

    if ($('.div').hasClass('error')) {
        $('.div').removeClass('error');
    else {
        $('.div').addClass('error');
    }
}

这在我第一次发送错误的 POST 请求时有效，但在后续的错误 POST 中不起作用，因为我认为 removeClass 工作不正常(或者更确切地说，我没有正确使用它) )。

我也尝试在这篇文章之后使用 jquery-ui CSS transition: fade background color, resetting after但这似乎对我不起作用。也许这与在按钮单击而不是 HTTP 响应的上下文中执行动画有关？

我的使用方向正确吗？如果可能的话，我希望保持在标准 jQuery 的范围内(即远离 jQuery UI)。

Answer 1

问题是因为在每个连续的请求中，您都会切换背景颜色，而不是将其设置为反射(reflect)上一个请求状态的状态。

要解决此问题，您可以在元素上设置 error 类，然后使用超时在任意时间(例如 10 秒)后删除该类:

function error_callback() {
  var $div = $('.div').addClass('error');
  setTimeout(function() {
    $div.removeClass('error');
  }, 10000);
}

请注意，正如 @Taplar 在下面的评论中提到的，您还需要记住在初始失败后不久发出第二个成功请求时删除 error 类。