jQuery 和 setTimeout

Question

我有以下代码：

            jQuery(document).ready(function()
            {
setTimeout($('#loading').fadeIn('slow'), 9999);
            });

它应该在 9999 毫秒后慢慢淡入加载元素，但它却立即淡入……为什么？

任何人都可以帮忙。谢谢

Answer 1

为了做你想做的事，你必须将 jQuery 的东西包装在一个匿名函数中：

setTimeout(function () {
    $('#loading').fadeIn('slow');
}, 9999);

必须告诉 setTimeout 函数（以及 setInterval）在之后要做什么延迟。只有三种方法可以告诉它要做什么：

1. 使用必须eval的 JavaScript 字符串：

   setTimeout('$("#loading").fadeIn("慢")', 9999);
   

   因为这使用了eval，并且可能变得非常难看，所以不推荐。但它工作正常。

2. 使用函数参考：

   var test = function () {
       $('#loading').fadeIn('慢');
   };
   
   setTimeout(测试, 9999);
   

   请注意，我没有执行setTimeout(test(), 9999)。我只是给了它函数的名称。

3. 使用您即时构造的匿名函数，这就是我在上面的第一个代码块中所做的。

如果您尝试执行类似 setTimeout(test(), 9999) 的操作，那么浏览器将首先执行 test()，然后给出setTimeout 的返回值。所以在你的尝试中......

setTimeout($('#loading').fadeIn('slow'), 9999);

浏览器正在执行 jQuery 的东西，淡入 #loading 元素，然后将 fadeIn 返回给 setTimeout。碰巧，fadeIn 函数返回一个 jQuery 对象。但 setTimeout 不知道如何处理对象，因此在 9999 毫秒的延迟后什么也不会发生。

Answer 2

settimeout() 函数来自 javascript，并接受一个函数作为参数。

最好的选择是使用 jQuery 的内置 delay() 函数：

 jQuery(document).ready(function()
 {
   $('#loading').delay(9999).fadeIn('slow');
 });

更多信息/示例：http://api.jquery。 com/延迟/

Answer 3

setTimeout 接受一个函数作为第一个参数 - 您当前正在传递一个 jQuery 选择器，它会立即被评估并执行 fadeIn 操作。相反，传入一个匿名函数：

setTimeout(function() {
 $('#loading').fadeIn('slow'), 9999);
}, 9999);

Answer 4

您还可以使用 jQuery 的 .delay()。

$('#loading').delay(9999).fadeIn('慢');