JavaScript 图像旋转

Question

我希望这个问题适合 Stack Overflow。我在网上查了很多书，但找不到这个问题的答案。

我想使用一些我遇到过的 JavaScript(见下文)。我已经在网页中设置了脚本并且运行良好......但是，作为一个经验丰富的程序员，我不明白它到底是如何工作的。我做了一些研究，但仍然无法破解代码中的几个部分。

我知道它创建了一个数组 - 但这是一个多维数组吗？

另外，我不明白为什么setTimeout函数中'active'要写成("+active+")(加号??):

setTimeout("image_rotate("+active+")", 5000);

为什么加号位于单词 active 的两端？另外，active 不应该是一个数字吗？

谢谢。

 <script type="text/javascript">

 var the_images = [];

 window.onload = function(){

 the_images.push(["http://www.adobe.com", "images/banner_1.jpg",      "Adobe"]);
 the_images.push(["http://www.microsoft.com", "images/banner_2.jpg", "Microsoft"]);
 the_images.push(["http://www.mozilla.org", "images/banner_3.jpg", "Mozilla"]);

 image_rotate(0);
 }

 function image_rotate(active){

 var image_container = document.getElementById("ad");


 image_container.innerHTML = "<a href=\""+the_images[active][0]+"\"><img    src=\""+the_images[active][1]+"\" alt=\""+the_images[active][2]+"\"   title=\""+the_images[active][2]+"\" /></a>";

 active++;

 if(active >= the_images.length){
 active = 0;
 }

 setTimeout("image_rotate("+active+")", 5000);

 }
 </script>

Answer 1

在开始修改代码之前，您可能应该尝试阅读一些有关 JavaScript 的教程。这是 JavaScript 名声不佳的原因之一。它实际上是一种非常深刻和复杂的语言，人们只是“剪切和粘贴”功能就造成了很多负面印象。

也就是说，我会帮助您解决问题，希望您能更好地理解这段代码。

是的，正在这一行创建一个数组(不，它不是多维的):

var the_images = [];

var 表示“我要声明一个变量”，the_images 是数组的名称，[] 是称为数组文字或数组初始值设定项。它将 the_images 初始化为一个空数组。 (例如，如果您改为编写 var the_images = [1,'hello',false];，它将使用三个元素(数字、字符串和 bool 值)对其进行初始化。)

数组有一个名为 push 的函数，它将元素添加到数组的末尾。因此，您将看到您在以下几行中向数组添加了元素:

the_images.push(["http://www.adobe.com", "images/banner_1.jpg", "Adobe"]);
the_images.push(["http://www.microsoft.com", "images/banner_2.jpg", "Microsoft"]);
the_images.push(["http://www.mozilla.org", "images/banner_3.jpg", "Mozilla"]);

请注意，您正在将数组添加到数组中，这可能是您印象中这些数组是多维的(数组的数组在技术上与多维数组不同)。

最后，这一行:

setTimeout("image_rotate("+active+")", 5000);

setTimeout 是一个本质上推迟某些内容以供将来执行的函数。从本质上讲，这就是说“在 5000 毫秒(5 秒)内调用函数 image_roate”。我想指出，强烈建议不要使用 setTimeout(将代码指定为字符串)。

active 是一个变量，是的，它恰好存储了一个数字。第一次迭代时，它是 0，第二次迭代时，它是 1，依此类推。在这种情况下，您想知道的加号正在执行字符串连接。因此，第一次调用 setTimeout 时，它会被调用:

"image_rotate("+active+")"  =>   "image_rotate("+0+")"   =>  "image_rotate(0)"

第二次

"image_rotate("+active+")"  =>   "image_rotate("+1+")"   =>  "image_rotate(1)"

如果您想查看发生了什么，可以将该值打印到控制台。更改此行:

setTimeout("image_rotate("+active+")", 5000);

对此:

var debugString = "image_rotate("+active+")";
setTimeout( debugString );
console.log( debugString );

然后，如果您检查控制台(Windows 上为 Ctrl-Shift-J，OSX 上为 Ctrl-Option-J)，您将看到程序的输出，希望能够阐明发生了什么情况。