时间戳

首页 > 解决方案 > jQuery - 延迟 ajax 以便 CSS 转换有时间运行

javascript - jQuery - 延迟 ajax 以便 CSS 转换有时间运行

问题描述

我正在像这样在 jQuery 中使用 Ajax 调用...

    $.ajax({
        type: 'GET',
        url: ajax_url,
        data: {
            action: 'filter',
        },
        beforeSend: function ()
        {
            $('#results').css("opacity" , "0.5");
        },
        success: function(data)
        {
            $('#results').css("opacity" , "1");
            $('#results').html(data);
        },
        error: function()
        {
            /* Display Ajax Error Message */
            $("#results").html('<p>There has been an error</p>');
        }
    });

这运作良好，它在加载时淡出结果，然后在找到它们时淡入它们。

问题是有时，如果只有几个结果，它们会在不透明度转换完成之前返回，目前使用 CSS 将其设置为 0.5 秒。

有没有办法延迟结果，或者确保至少 0.5s 秒已经过去，以便不透明度过渡有时间运行？

标签： javascriptjqueryajax

解决方案

代替：

$.ajax({
    (...)
    success: function(data) {
        $('#results').css("opacity" , "1");
        $('#results').html(data);
    },
    (...)
});

和：

$.ajax({
    (...)
    success: function(data) {
      var delayTime = 500 // 0.5s in milliseconds

      $('#results').css('opacity' , '1');

      setTimeout(function() {
        $('#results').html(data);
      }, delayTime);
    }
    (...)
});

作为旁注：尝试保持一致并在整个代码中使用相同的“”或“”引号集，这有助于避免错误。

推荐阅读