首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JS :在setTimeout中使用setInterval,setTimeout没有作用

JS :在setTimeout中使用setInterval,setTimeout没有作用
EN

Stack Overflow用户
提问于 2016-05-09 21:04:16
回答 2查看 829关注 0票数 1

我试图使随机图像向上移动,然后回到它们原来的位置。

代码语言:javascript
运行
复制
<script>

var looper = setInterval(animateAll, 2000, myArray);
function animateAll(myArray) {

    // Gets a random image ID
    var randomId = myArray[Math.floor(Math.random()*myArray.length)]; 

    // Make that random icon bounce
    bounce(randomId) ;
}

function bounce(randomId) {
    var icon = document.getElementById(randomId)

    var top = icon.offsetTop;

    setTimeout ( icon.style.top = top-20 + "px", 500) ;
    setTimeout ( icon.style.top = top + "px", 500) ;
}
</script>   

这两条setTimeout行都可以正常工作。只有一行,好的图像将移动,而不返回到他们原来的位置。在这两行中,图像根本不会移动,可能是因为每一行之间都没有延迟。

谢谢你的帮助!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-09 21:14:39

问题是,您正在立即执行setTimeout调用中的代码。您实际上是在说“在500毫秒内执行设置icon.style.top = whatever的结果”.什么都不做。

试一试:

代码语言:javascript
运行
复制
icon.style.top = top-20 + "px";
setTimeout ( function() { icon.style.top = top + "px"; }, 500) ;

..。我在这事上浪费了15分钟,洛尔:

代码语言:javascript
运行
复制
var steps = 7;
var increment = (Math.PI) / steps;
var bounceHeight = 20;

function doStep(icon, start, major, minor, height) {
    if (minor == steps) {
        major--;
        height /= 2;
        minor = 0;
        icon.style.top = start;
    }
    if (major < 0) {
        return;
    }
    if (minor < steps) {
        pos = Math.sin((minor + 1) * increment);
        icon.style.top = (start - height * pos) + "px";
        setTimeout( function() { doStep(icon, start, major, minor + 1, height); }, 500/steps );
    }
}

function bounce(randomId) {
    var icon = document.getElementById(randomId)

    var top = icon.offsetTop;
    setTimeout ( function() { doStep(icon, top, 3, 0, bounceHeight); }, 500/steps ) ;
}
票数 2
EN

Stack Overflow用户

发布于 2016-05-09 21:15:22

当您调用回弹时,立即将图像向上移动,然后在超时后将其返回到原来的位置,怎么样?

代码语言:javascript
运行
复制
function bounce(randomId) {
    var icon = document.getElementById(randomId)

    var top = icon.offsetTop;

    icon.style.top = top-20 + "px";
    setTimeout ( icon.style.top = top + "px", 500) ;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37125419

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档