如何使用 jQuery 等待 5 秒？

Posted 2023-05-07

【中文标题】如何使用 jQuery 等待 5 秒？

【英文标题】：How to wait 5 seconds with jQuery?

【发布时间】：2010-12-22 14:35:43

【问题描述】：

我正在尝试创建页面加载的效果，5 秒后，屏幕上的成功消息淡出或向上滑动。

我怎样才能做到这一点？

【参考方案1】：

内置于 javascript setTimeout.

setTimeout(
  function() 
  
    //do something special
  , 5000);

更新：您想在页面完成加载后等待，因此将该代码放入您的 $(document).ready(...); 脚本中。

更新 2：jquery 1.4.0 引入了.delay 方法。 Check it out。请注意，.delay 仅适用于 jQuery 效果队列。

【讨论】：

在 jQuery 中有什么可以用来代替 setTimeout 的吗？

jQuery 是用 javascript 编写的。如果包含并使用 jQuery，则需要 javascript。如果你有 javascript，你有setTimeout。

是的，我知道。我的意思是 $('.message').wait(5000).slideUp();会好很多。但我认为不存在 wait() 函数。

是的，一定要使用 .delay(timeInMS)。我们

只是一个旁注 - .delay 仅适用于 jQuery 效果队列，因此它非常适合像这样的幻灯片和淡入淡出。我花了一段时间才意识到它不适用于你可以用 jQuery 做的其他事情。

【参考方案2】：

使用普通的 javascript 计时器：

$(function()
   function show_popup()
      $("#message").slideUp();
   ;
   window.setTimeout( show_popup, 5000 ); // 5 seconds
);

这将在 DOM 准备好后等待 5 秒。如果你想等到页面实际上是loaded 你需要使用这个：

$(window).load(function()
   function show_popup()
      $("#message").slideUp();
   ;
   window.setTimeout( show_popup, 5000 ); // 5 seconds
)

编辑： 回答 OP 的评论，询问是否有办法在 jQuery 中做到这一点而不使用 setTimeout，答案是否定的。但如果你想让它更“jQueryish”，你可以像这样包装它：

$.wait = function( callback, seconds)
   return window.setTimeout( callback, seconds * 1000 );

你可以这样称呼它：

$.wait( function() $("#message").slideUp() , 5);

【参考方案3】：

我遇到了这个问题，我想我会提供有关此主题的更新。 jQuery (v1.5+) 包含一个Deferred 模型，（尽管在 jQuery 3 之前不遵守 Promises/A 规范） 通常被认为是解决许多异步问题的更清晰的方法。我相信使用这种方法实现$.wait() 方法特别易读：

$.wait = function(ms) 
    var defer = $.Deferred();
    setTimeout(function()  defer.resolve(); , ms);
    return defer;
;

你可以这样使用它：

$.wait(5000).then(disco);

但是，如果在暂停之后，您只想对单个 jQuery 选择执行操作，那么您应该使用 jQuery 的原生 .delay()，我相信它也使用了 Deferred 的底层： p>

$(".my-element").delay(5000).fadeIn();

【讨论】：

Ian Clark - 这是一个超级棒的解决方案！我非常喜欢它，并将在我的项目中使用它。谢谢！

不知道为什么这段短代码不起作用

【参考方案4】：

setTimeout(function()

,5000); 

将您的代码放在 内

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

等

【讨论】：

这与the accepted answer有何不同？

格式化/语法，它对时间安排提供了更清晰的说明。

【参考方案5】：

一直在使用这个消息叠加层，可以在点击时立即关闭或在 10 秒后自动关闭。

button = $('.status-button a', whatever);
if(button.hasClass('close')) 
  button.delay(10000).queue(function() 
    $(this).click().dequeue();
  );

【参考方案6】：

Underscore library 还提供了“延迟”功能：

_.delay(function(msg)  console.log(msg); , 5000, 'Hello');

【参考方案7】：

根据 Joey 的回答，我想出了一个预期的（通过 jQuery，阅读“队列”）解决方案。

它有点遵循 jQuery.animate() 语法 - 允许与其他 fx 函数链接，支持“慢”和其他 jQuery.fx.speeds 以及完全 jQuery。如果你停止它们，它将以与动画相同的方式处理。

更多用法的jsFiddle测试场（比如炫耀.stop()），可以找到here。

解决方案的核心是：

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) =>  $('#result').text('done.'); next();  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

整体作为一个插件，支持 $.wait() 和 $(..).wait() 的使用：

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) 

  $.wait = function(duration, completeCallback, target) 
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next)completeCallback && completeCallback.call($target); next(););
  

  $.fn.wait = function(duration, completeCallback) 
    return $.wait.call(this, duration, completeCallback, this);
  ;

)(jQuery);

//TEST
$(function() 

  // stand alone
  $.wait(1000, function() 
    $('#result')
    .append('...done');
  );

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() 
    $(this).append('after slow');
  )
  .css(color: 'green');
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

注意： 因为等待会添加到动画堆栈中，所以 $.css() 会立即执行 - 正如预期的那样：预期的 jQuery 行为。

【参考方案8】：

我意识到这是一个老问题，但这里有一个插件可以解决这个问题，有人可能会觉得有用。

https://github.com/madbook/jquery.wait

让你这样做：

$('#myElement').addClass('load').wait(5000).addClass('done');

之所以应该使用.wait 而不是.delay，是因为.delay 并不支持所有的jquery 函数，而且.delay 仅适用于动画函数。比如延迟不支持.addClass和.removeClass

或者你可以使用这个函数。

function sleep(milliseconds) 
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) 
    if ((new Date().getTime() - start) > milliseconds)
      break;
    
  


sleep(5000);

【参考方案9】：

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

【讨论】：

很好的答案，但它只是代码！请添加一些注释来解释您的代码。谢谢！

【参考方案10】：

要使用 aynsc/await 快速轻松地延迟，您可以这样做：

await $(window).delay(5000).promise();