php - 如果存在页面重定向，成功函数中的 jQuery ajax 函数将被忽略

Question

我有一个 ajax 请求，我希望在重新加载页面之前完成一些 jQuery 动画。问题是我的动画函数“flyToChart”被完全忽略并且页面立即重新加载。如果我注释掉重新加载页面代码，动画效果很好。我怎样才能让我的动画先运行然后重新加载页面甚至重定向到另一个页面？这是我的代码:

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart(reload);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart(reload) {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));

    reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

function reload()
{
    window.location.reload();
}

Answer 1

查看下面的代码::

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart();               
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart() {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));
   window.location.reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}