如何正确使用延迟功能

Question

延迟功能无法正常工作。我确定我做错了什么。我有一个我想要使用的叠加层。当用户点击链接时，我希望此功能延迟1秒然后“释放”，允许用户转到他们点击的链接。我怎么能这样做？

     $("body").append("<div id='overlay'></div>");
     $("#overlay").height(docHeight).css({
...
      }).delay(1000);  <-- This is where I think it should go...
    });

修改

我已尝试过两种解决方案，但我无法保持叠加效果。屏幕刚刚刷新半秒左右。它忽略了setTimeout函数。我测试setTimeout函数所做的是以下但我甚至没有得到警报。我假设我将覆盖代码放在警报（）的位置，对吧？

为了清楚起见，我希望看到的是点击.load选择器然后用户转发到他们点击的链接时的1秒延迟。

  $('.load').click(function() {
    setTimeout(function(){
      alert();
    }, 1000);
  });

Answer 1

jQuery延迟函数是jQuery动画的助手。它不会延迟任意操作。如果您需要延迟某些内容，请使用setTimeout。

以下将在1秒后执行内部函数。

setTimeout(function() { $("#overlay").height(100); }, 1000);

Answer 2

有趣的是，我昨晚遇到了这件事（帮助了我）。

http://benalman.com/projects/jquery-dotimeout-plugin/

这是一个允许你像超时一样工作的插件 - 例如用X ms做某事;但它也允许你在链上执行延迟/睡眠/等待功能（某种程度）

Answer 3

.delay()如何运作

来自文档：

  

.delay() - 设置计时器以延迟队列中后续项目的执行。

示例用法：

$("div.first").slideUp(300).delay(800).fadeIn(400);

解决方案

如果你想延迟某些命令的执行并且它不像上面那样在队列中，那么只需使用简单的JavaScript setTimeout()：

setTimeout(function(){
    $("#overlay").height(docHeight).css({
        ...
    });
}, 1000);

在您的情况下，这是首选解决方案，因为delay()仅适用于排队项目（如上所述）。作为证据证明这不起作用：http://jsfiddle.net/xaC3m/