Question

我需要在用户执行点击操作后的一整分钟内显示一些消息。

有没有办法使用delay（）并以某种方式链接这些消息，还是我的下一个函数在上一次结束后启动下一条消息？

<div id="myMsgs"></div>

$('#myMsgs').text('message one').delay(20000).fadeOut('slow', function() 
{ 
    $('#myMsgs').text('message two').fadeIn('slow').delay(20000).fadeOut('slow', function() { ... });
});

我的直觉告诉我这太复杂了。这是一个更好的方式，是吗？

Answer 1

我建议直接使用setTimeout或等效的，而不是以这种方式使用纯jQuery。例如：

var showMessageOne = function() {
  $('#myMsgs').text('message one');

  setTimeout(function() {
    $('#myMsgs').hide();
    showMessageTwo();
  }, 20000);

}

var showMessageTwo = function() {
  $('#myMsgs').text('message two');

  setTimeout(function() {
    $('#myMsgs').hide();
  }, 20000);

}

$("#trigger").click(function(ev) {
  showMessageOne();
});

这更清晰，更明确，并且对于什么＆＃34; showMessageOne＆＃34;有清晰的可读性。实际上是要做的。

这是一个快速肮脏的例子，你应该完全重构重复，但我认为你的例子有点做作，所以我不想深入研究。

淡入淡出不同的消息

1 个答案: