Jquery 使用 time() 延迟滑动；答案

【问题标题】：Jquery Delay slideDown using time();Jquery 使用 time() 延迟滑动；
【发布时间】：2012-02-02 17:21:29
【问题描述】：

抱歉，我找不到这个。

$('div#loader').slideDown("fast").delay(1.5);

没有按预期说话，我希望它到slideDown，然后在该模式下停留 1.5 秒，然后加载功能非常快，然后它使用 fast 向上滑动。我认为delay(); 是正确的方法。

希望看到的人的完整功能：

$(document).ready(function () {
    function last_msg_funtion() {
        var ID = $(".pic_box:last").attr("id");
        $('div#loader').slideDown("fast").delay(1.5);
        $.post("/?action=get&id=" + ID,
        function (data) {
            if (data!="") {
                $(".pic_box:last").after(data);
            }
            $('div#loader').slideUp("fast");
        });
    };
});

【问题讨论】：

标签： jquery delay slidedown

【解决方案1】：

延迟只会延迟在它之后的函数，所以它没有延迟任何东西。你最好在这里使用setTimeout IMO

$('div#loader').slideDown("fast", function(){
   setTimeout(function(){
    $.post("/?action=get&id=" + ID,
    function (data) {
        if (data!="") {
            $(".pic_box:last").after(data);
        }
        $('div#loader').slideUp("fast");
    });
}, 1500);
});

如果你有兴趣，这里是延迟代码，

// Based off of the plugin by Clint Helfers, with permission.
// http://blindsignals.com/index.php/2009/07/jquery-delay/
delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
    type = type || "fx";

    return this.queue( type, function( next, hooks ) {
        var timeout = setTimeout( next, time );
        hooks.stop = function() {
            clearTimeout( timeout );
        };
    });
},

您可以看到它如何只占用函数链中的下一个内容并延迟它。

【讨论】：

但是即使帖子已经加载了数据，这个函数也会显示加载图标。由于服务器负载，我想延迟发布功能。所以我首先使用加载图标，延迟并通过 JavaScript 继续。
最好在slideDown回调中设置超时。所以即使滑动速度改变，我们也不需要改变超时延迟。

【解决方案2】：

您可以定义一个 wait 辅助函数并在等待 1.5 秒后运行您的代码：

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


$(document).ready(function () {
    function last_msg_funtion() {
        var ID = $(".pic_box:last").attr("id");
        $('div#loader').slideDown("fast");
        $.wait(1500).then(function() {
            $.post("/?action=get&id=" + ID, function (data) {
                if (data != "") {
                    $(".pic_box:last").after(data);
                }
                $('div#loader').slideUp("fast");
            });
        });
    };
});

wait 函数使您的代码在 IMO 上的可读性更好

【讨论】：

不，我希望滑块加载器出现 1.5 秒，然后消失，然后执行我的 post 命令。我们不能以其他方式（感谢发布）纯粹的流量和 UI/UX - 不想让它滞后。