javascript - jQuery:用最短的时间完成处理程序

Question

我有一个使用 .load() 加载内容的函数(但它可以使用任何内容)。有时，内容加载得如此之快，以至于我使用的过渡动画看起来不太好，事实上，它非常令人反感。我想在转换之间添加一个最短时间，这样如果内容加载得非常快，它仍然会等待最短时间(比如 500 毫秒)。

我的代码目前看起来像这样，有一个好的 jQuery 方法可以做到这一点吗？

$("body").on("click","a[href]",function (e) {
    e.preventDefault();

    var href = $(this).attr("href");

    // Do pre load animation (removed for clarity)
    $("#rightpanel").load($(this).attr("href"), function () {
        // Do post load animation (removed for clarity)
        History.pushState(null, null, href);
    });
});

Answer 1

这是一个涉及 promise 的答案:

// suggestion 1
// wait for both pre-load animation and load to complete :

$.when(
    $('.gizmo').slideUp(),
    $("#rightpanel").load($(this).attr("href"))
).done(function(){
    $('.gizmo').stop().slideDown();
    History.pushState(null, null, href);
});


// suggestion 2
// add a "500ms promise" :

function delay(time) {
   var dfd = $.Deferred();
   setTimeout(function(){ dfd.resolve() }, time);
   return dfd.promise();
}

$.when( delay(500),  $("#rightpanel").load($(this).attr("href")) ).done(function(){
    //post load stuff
});

这是一个fiddle一起玩。

<小时/>

正如 Chris 在评论中正确指出的那样，上面的代码不适用于 .load() : .load() 适用于 jQuery 选择，并返回所选集而不是底层 ajax promise 。

如果您使用 $.ajax、$.get、$.post 或其他全局 jQuery 函数，上述代码将起作用，< br/> 或者您可以创建一个额外的 promise :

var loadData = $.Deferred();
$('#rightpanel').load($(this).attr('href'), function(){ loadData.resolve() });

$.when( delay(500), loadData ).done( ... )