javascript setTimeout 函數，有問題嗎

Question

我使用 settimeout function，為什么它不起作用。 我只想每 2 秒更改一次圖像。 但什么也沒發生，它只顯示第一張圖像，但沒有改變。

<script type="text/javascript">

        function parta(){
            document.getElementById("carimg").src="c1.img";
            window.setTimeout(partb,2000);
        }
        function partb(){
            document.getElementById("carimg").src="c2.jpg";
            window.setTimeout(partc,2000);
        }
        function partc(){
            document.getElementById("carimg").src="c3.jpg";
            window.setTimeout(parta,2000);
        }


</script>

Answer 1

您一遍又一遍地聲明三個函數，並且從不調用它們中的任何一個。

如果要在三個圖像之間切換，請將它們放入一個數組中，並使用setInterval一次一個元素地通過數組 go ：

var images = ['c1.img', 'c2.jpg', 'c3.jpg'];
var imgNum = 0;

function rotateImage() {
    document.getElementById("carimg").src= images[imgNum];
    imgNum = (imgNum + 1) % images.length;
}

rotateImage();
setInterval(rotateImage, 2000);

Answer 2

如果你想讓你的代碼接近你現在所擁有的，你只需要改變一些事情：

function parta() {
  document.getElementById("carimg").src="c1.img";
  window.setTimeout(partb,2000);
}
function partb() {
  document.getElementById("carimg").src="c2.jpg";
  window.setTimeout(partc,2000);
}
function partc() {
  document.getElementById("carimg").src="c3.jpg";
  window.setTimeout(parta,2000);
}

parta();

在這種情況下不需要使用while ，因為每個 function 將在 2 秒后相互調用。 但是，您仍然需要啟動“循環”，這就是您需要調用parta()的原因。 此外，在這種情況下使用setInterval可能更有意義。

您可以在 CodePen 上使用此代碼片段： https://codepen.io/yvesgurcan/pen/RwwOawO 。

Answer 3

首先，您不需要使用 while，其次，您錯過了函數的括號。

 function parta(){ document.getElementById("carimg").src="c1.jpg"; window.setTimeout(partb,2000); } function partb(){ document.getElementById("carimg").src="c2.jpg"; window.setTimeout(partc,2000); } function partc(){ document.getElementById("carimg").src="c3.jpg"; window.setTimeout(parta,2000); } parta();

 <img src="" id="carimg">

Answer 4

試試這個

let imageSrc = ['c1.img', 'c2.jpg', 'c3.jpg'];
let imgIndex;
setInterval(()=>{
    if(imgIndex == undefined) {
        imgIndex = 0;
    } else {
        if(imgIndex >= imageSrc.length - 1) {
            imgIndex = 0;
        } else {
            imgIndex++;
        }
    }
    document.getElementById("carimg").src = imageSrc[imgIndex];
}, 2000);