jquery .delay() 在 setInterval 内

Question

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

但是 setInterval 中的 delay() 似乎没有工作，或者它没有等待 3 秒（在 setInterval 中）。

我的目标：

• 先等待 3 秒
• 打印Hello word 10
• 然后等待 2 秒淡出
• 等待 3 秒
• 打印你好字9
• 等等……

下面的 sn-p 显示它只等待 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>

Answer 2

在最后一个动画完成时使用对函数的递归调用。将setTinterval 与一系列动画同步非常困难，并且没有一个领先于另一个，并且随着时间的推移差异会变得更加夸张

类似：

var delay =1000;//speeded up dfor demo
var count = 10;
// store setInterval ID in var
function counter() {
  // log value of count
  console.log(count);

  $('.output').append(
    " hello world" + count + "<br>"
  ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() {
    // fadeOut finished, decide to do it again or not
    if (count > 0) {
      count--;
      // call function again          
      setTimeout(counter,delay);
    }
  });
}

setTimeout(counter,delay)

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

Answer 3

实现目标的最佳方法是使用 setTimeout 而不是 setInterval。你可以这样使用它：

<script>


//alert("js");

function fadeOut()
{
    alert('do fadeout here');
}

function hello()
{
    alert('say hello word');

    setTimeout(fadeOut,2000);
}

function first()
{
    setTimeout(hello,3000);
}

//setTimeout(null,3000);
setTimeout(first(), 3000)  ;  
//alert('hello');

</script>

希望对你有帮助。

Answer 4

这是我的解决方案。谢谢@chcharlietfl

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>