javascript - setInterval 内的 jquery .delay()

Question

我正在使用带有 jQ​​uery 延迟的 setInterval。

但是 setInterval 中的 delay() 似乎不起作用，或者它没有等待 3 秒(在 setInterval 中)。

我的目标:

• 先等待3秒
• 打印Hello单词10
• 然后等待 2 秒淡出
• 等待 3 秒
• 打印你好字9
• 等等...

下面的代码片段显示它只等待 2 秒并打印..

count = 10;
// store setInterval ID in var
var interval = setInterval(function(){
  // log value of count
  console.log(count);

   $('.output').append(
    " hello world"+count+"<br>"
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow');

    if(count <= 0) {
      // if count reaches 10 the clear using interval id
      clearInterval(interval);
    } else {
      // otherwise increment count
         count--;
     }
  }, 3000);

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

Answer 1

我建议使用setTimeout来等待fadeOut完成动画。

count = 10;
setTimeout(function onTimeout(){
  // log value of count
  console.log(count);

   $('.output').append(
    " hello world"+count+"<br>"
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() {
      if(count > 0) {
        count--;
        setTimeout(onTimeout, 3000);
      } 
    });
}, 3000);

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