jQuery - задерживает ajax, чтобы CSS-переход имел время для запуска

Question

Я использую Ajax-вызов в jQuery, как это ...

    $.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>');
        }
    });

Это работает хорошо, оно затухает во время загрузки, а затем затухает, когда находит.

Проблема в том, что иногда, если есть только несколько результатов, они возвращаются до завершения переходов непрозрачности, в настоящее время это значение равно 0,5 с использованием CSS.

Есть ли способотложить результаты или убедиться, что прошло не менее 0,5 с, чтобы у перехода времени на непрозрачность было время?

Answer 1

Используйте метод stop (true - останавливает анимацию, где бы она ни находилась) с помощью jquery animate (продолжит выполнение с последнего оставшегося шага до того места, где вы хотите его видеть):

https://api.jquery.com/animate/

https://www.w3schools.com/jquery/eff_stop.asp

$.ajax({
    type: 'GET',
    url: ajax_url,
    data: {
        action: 'filter',
    },
    beforeSend: function ()
    {
        $('#results').stop(true).animate({
        "opacity" : "0.5"
        }, 500 , function(){ // 500 is duration in ms
          console.log('beforeSend animation stopped');
     });
    },
    success: function(data)
    {
        $('#results').stop(true).animate({
        "opacity" : "1"
        }, 1000 , function(){ // 1000 is 1s
          console.log('success animation stopped');
           $('#results').html(data);
     });

    },
    error: function()
    {
        /* Display Ajax Error Message */
        $("#results").html('<p>There has been an error</p>');
    }
});

Answer 2

Заменить:

$.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);
    }
    (...)
});

В качестве примечания: Старайтесь быть последовательными и используйте тот же набор "" или "цитат в вашем коде, это помогает избежать ошибок.

Answer 3

Да, есть лучшее решение, которое вы можете попробовать.Вы можете добавить еще один литерал к объекту $ .ajax, т.е.

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

Функция завершения запускается, когда все ваши методы выполнили свою работу. вы просто сохраняете данные, возвращаемые сервером, в DOM результатов в методе успеха и добавляете css в результирующий DOM в методе complete .Метод complete будет выполняться по отношению ко всем методам, включая метод success, и покажет ваш результат DOM на заключительной стадии выполнения.Надеюсь, у вас есть решение ...:)

Answer 4

Вам лучше использовать задержку анимации CSS.Это легче, чем setTimeout ().

Проверьте ссылку, чтобы увидеть, как это работает: https://www.w3schools.com/cssref/css3_pr_animation-delay.asp