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

jquery。setInterval内的delay()

setinterval delay jquery javascript

John Mark · 技术社区 · 7 年前

我使用带有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 7 年前

我建议使用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 7 年前

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

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

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前