代码之家 › 专栏 › 技术社区 › John Mark

jquery。setInterval内的delay()

setinterval delay jquery javascript

John Mark · 技术社区 · 6 年前

我使用带有jQuery延迟的setInterval。

但是 delay() setInterval内部似乎不工作或没有等待3秒(在setInterval中)。

我的目标:

先等待3秒钟
打印Hello word 10
然后等待2秒以淡出
等待3秒
打印hello word 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>

4 回复 | 直到 3 年前

Bsalex 6 年前

我建议使用setTimeout等待淡出完成动画。

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>

charlietfl 6 年前

当最后一个动画完成时,使用递归调用函数。很难同步 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>

Anas Lafrouji 6 年前

实现目标的最佳方法是使用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>

希望有帮助。

John Mark 6 年前

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>