使用ajax延迟输出数据？

Question

我正在尝试切换

div 元素当前有一些信息，当用户单击链接时，它将向上滑动，然后向下滑动以显示新信息。

我正在研究 ajax，因此当用户单击链接时，出现的新信息来自另一个页面。

('a').toggle(function(){
    $('.content').slideUp("fast");  
    $.ajax({
        type: "GET",
        url: "URL",
        data: data,
        success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
        }
    });
},function(){
    $('.element').slideUp("slow");
    $('.content').delay("slow").slideDown("slow");

});


<div class='content'>
old information
</div>
<div class='element'>
New information from another page, being shown through ajax
</div>

这就是我的脚本的基础知识。现在，当我单击链接时，新信息会在旧信息向上滑动之前立即显示。

关于我应该如何解决这个问题有什么想法或想法吗？也许有更好的写法？

另外，有没有办法删除 .html(data)？那么当我滑回原始文件夹时，它会消失吗？或者我只需要使用 .hide() 函数？也许.remove()？

谢谢！

Answer 1

听起来您可能想在幻灯片上使用回调。一旦滑动函数完成，它将运行回调函数。
所以是这样的：

$('a').toggle(function(){
    $('.content').slideUp("fast", function(){
        $.ajax({
            type: "GET",
            url: "URL",
            data: data,
            success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
            }
        });
    });

虽然这样做的缺点是在上滑发生之前它不会通过 AJAX 加载结果，如果让你等待额外的时间，这是有可能的，但是，这听起来不像是等待问题，所以这可能就是您所需要的。

如果我遇到了同样的问题，听起来就像您遇到的那样，我可能会创建 2 个变量，一个用于保存幻灯片状态，另一个用于保存从 AJAX 返回的 HTML。
然后，我将使 ajax 成功回调和 Slideup 回调运行一个函数，如果满足 2 个条件，该函数将插入 HTML 并向下滑动：1) 上滑已完成，2) AJAX 请求已返回结果。

这样，请求和上滑/滑下将尽可能快地协同工作，但不会重叠。

// here's an example of the function you would have both slideUp and ajax success callbacks run
var $html,
    $slide = false; // false indicates we're not in the process of a slideup

function process_data()
{
    // only process the slidedown if we're not in the process of a slideup and we have the html we're after
    if (!$slide && $html)
    {
        $('.element').slideDown('fast').html($html);
        // make sure to empty $html afterwards so we don't assume we have data next time this runs
        $html = '';
    }
}

所以你的幻灯片将在回调中包含上述函数

$slide = true;
$('.content').slideUp('fast', function(){
     // the slideup is completed, so set the slide back to false
     $slide = false;

    // process data
     process_data();
});

，并且你的ajax成功也将使用process_data

success: function(data){
    // store the returning data in the html variable
    $html = data;

    // process data
    process_data();