JS：在 setInterval 中使用 setTimeout，setTimeout 无效

Question

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

<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行都工作正常。只有一行，那么图像将移动而不会 returning 到它们的原始位置。对于这两条线，图像根本不会移动，可能是因为它们之间没有延迟。

感谢您的帮助！

Answer 1

问题是您正在立即执行 setTimeout 调用中的代码。您实际上是在说 "execute the result of setting the icon.style.top = whatever in 500 milliseconds" ...什么都不做。

试试这个：

icon.style.top = top-20 + "px";
setTimeout ( function() { icon.style.top = top + "px"; }, 500) ;

...而我只是为此浪费了 15 分钟，哈哈：

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 ) ;
}

Answer 2

调用bounce时立即将图片向上移动，超时后返回原位如何？

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) ;
}

JS：在 setInterval 中使用 setTimeout，setTimeout 无效

JS : Using a setTimeout inside a setInterval, the setTimeout has no effect

javascript

settimeout

setinterval