JavaScript函数重复执行致图片随机切换，求固定图片方案

你的代码里图片持续随机切换的核心原因是误用了setInterval——这个方法会每隔指定时间重复执行目标函数，而你实际需要的是每个步骤只执行一次，应该用setTimeout（仅执行一次的定时器）。

另外，原代码里的定时器会层层叠加：spinMachine每隔1秒调用enterBall，enterBall又每隔1秒调用liftBall，liftBall再每隔1.5秒调用changeImage，最终导致changeImage被频繁重复触发，图片切换越来越乱。

修改后的代码 #

const imageSelector = document.querySelector("#changeHeron")
function spinMachine() {
    document.getElementById('spinner').disabled = 'disabled';
    spinner.style.transform = "rotate(90deg)";
    // 替换为setTimeout，仅执行一次enterBall
    setTimeout(enterBall, 1000)
    var protmt = prompt("What's your name?")
    alert("Hey there " + protmt + ", " + "its great to see you here")
}
function enterBall() {
    var ball = document.getElementById("changeHeron");
    ball.style.opacity = "100%";
    ball.style.transform = "ScaleX(50%) ScaleY(50%)";
    // 替换为setTimeout，仅执行一次liftBall
    setTimeout(liftBall, 1000);
}
function liftBall() {
    var ball = document.getElementById("changeHeron");
    // 合并重复的transform赋值，避免后一次覆盖前一次效果
    ball.style.transform = "translateY(-250%) ScaleX(200%) ScaleY(200%)";
    ball.style.top = "40%";
    // 替换为setTimeout，仅执行一次changeImage
    setTimeout(changeImage, 1500);
}

function changeImage() {
    var images = ["./Images/Football.png", "./Images/Mousetache.png", "./Images/OG.svg"];
    var randomNum = Math.floor(Math.random() * images.length);
    var ball = document.getElementById("changeHeron");
    ball.src = images[randomNum];
    ball.style.borderRadius = "5%";
    ball.style.backgroundColor = "white";
}

关键修改点 #

• 替换所有setInterval为setTimeout：setInterval会持续重复执行函数，而setTimeout仅执行一次，彻底避免图片被反复切换。
• 修复liftBall里的transform重复赋值问题：原代码中两次设置transform，后一次会覆盖前一次的位移效果，合并后能同时实现位移和缩放。

这样修改后，图片只会在liftBall执行1.5秒后切换一次，之后就保持固定不再变化。

内容的提问来源于stack exchange，提问作者Michael Albert