不了解在没有设置FOR或WHILE循环的情况下幻灯片如何循环播放?

时间:2019-02-11 19:36:22

标签: javascript html

我敢肯定,答案很简单,而且很明显,但是我对下面的代码如何循环感到困惑。如您所见,它只是用于简单的幻灯片放映,而我似乎无法理解的是,幻灯片放映是如何在没有FOR或WHILE循环的情况下循环的。我可以看到该函数由SetTimeout调用,但是我的理解是该方法仅调用一次函数?

<img name="slide" width="400" height="200" />

var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";

// Change Image
function changeImg(){
document.slide.src = images[i];

// Check If Index Is Under Max
if(i < images.length - 1){
  // Add 1 to Index
  i++; 
} else { 
    // Reset Back To O
    i = 0;
}

// Run function every x seconds
setTimeout("changeImg()", time);
}

// Run function when page loads  
window.onload=changeImg;

1 个答案:

答案 0 :(得分:2)

  1. 您将方法附加到窗口加载事件处理程序
  2. 浏览器在窗口上触发load事件,然后执行changeImg函数
  3. changeImg运行,最后在“时间”持续时间之后为changeImg函数执行setTimeout
  4. “时间”过去了,setTimeout开始了changeImg
  5. changeImg运行,最后在“时间”持续时间之后为changeImg函数执行setTimeout
  6. “时间”过去了,setTimeout开始了changeImg
  7. 更改Img运行,...

因此,通过递归,您正在创建逻辑的间接循环。