请解释Javascript图像旋转代码

我使用下面的代码来创建基本图像旋转功能，&我想更好地了解它是如何工作的。我得到了它的大部分，但旋转函数中使用'strict'的行等于&三元运算符，即（i ===（imgs.length -1））？我= 0：我++;）有点混乱。我知道这是增加了柜台，但在此之前它做了什么？请解释Javascript图像旋转代码

var i, imgs, pic; 

function rotate() 
{ 
    pic.src = imgs[i] ; 
    (i === (imgs.length -1)) ? i=0 : i++ ; 
    setTimeout(rotate, 2500); 
} 

function init() 
{ 
    pic = document.getElementById("pic"); 

    imgs = [ 'images/shimano_offer.jpg', 'images/kids_bikes1.jpg', 'images/cycle_to_work.jpg' ] ; 

    var preload= new Array(); 
    for(i=0; i< imgs.length; i++) 
    { 
     preload[ i ] = new Image(); 
     preload[ i ].src = imgs[ i ]; 
    } 

    i=0; 

    rotate(); 
}

代码为http://ineasysteps.com/products-page/all_books/javascript-in-easy-steps-4th-edition/

来源

2012-08-16 johnmc321

嗨johnmc321，如果我们其中一个人回答了您的问题，您是否可以点击答案旁边的复选框接受它？谢谢。 – 2012-08-17 18:37:04

@AresAvatar，完成，对延迟道歉 – johnmc321 2012-08-20 21:05:26

谢谢johnmc321！ :-) – 2012-08-20 22:56:53

线

(i === (imgs.length -1)) ? i=0 : i++ ;

可以（也应该）被写为：

if (i === (imgs.length - 1)) { 
    i = 0; 
} else { 
    i += 1; 
}

是，前者是少字节，但多更难理解和调试。

编辑： Norguard指出了使用三元形式的有效方法。我使用三元组，但在这种情况下，我不会这样做，因为我可能想在调试时的某个时刻在“i = 0”条件中放置一个断点。如果你不预期需要断点，他的方法更简洁，更可取。

来源

2012-08-16 23:22:37

好的，那个结构看起来更熟悉。我是否认为' - 1'指的是imgs数组中的最后一项？ – johnmc321 2012-08-16 23:57:27

是的，你是。 JavaScript数组基于零，如C或C++，所以第一个元素是[0]，最后一个是[length -1]。 – 2012-08-17 00:16:47

我不反对阿瑞斯 - 这是一个推理i价值的完全有效的方法。

是交代不清的关于特定三元声明（这是它是什么）的一部分，是三元应该设置ONE VALUE。

这是设置单个变量的理想情况。

三元说法是有道理的，很容易推理是这样的：

var mood = (bank_account_balance > 0) ? "happy" : "unhappy"; 
console.log(mood);

这眼看mood是“快乐”，如果余额是正的一个非常干净的方式，而“愁“ 除此以外。这是伟大的，和简洁，并没有要求全：

if (....) { 
    this_one_var = "one_thing"; 
} else if (...) { 
    this_one_var = "something_else"; 
} else { 
    this_one_var = "another_thing"; 
} 

this_one_var = (...) ? "one_thing" : (...) ? "something_else" : "another_thing"; 
this_other_var = (...) ? "one_thing2" : (...) ? "something_else2" : "another_thing2";

你能想象在第一形式分配6个不同的增值经销商，而不是第二，根据不同的条件？

我不断使用第二个，它使得它非常非常整齐地分配值。

问题是，在这个例子中，他们没有这样做。他们使用三元作为if语句来触发代码... ...这就是如果是。

请参阅战神的答案如何做到这一点，如果。

但作为三元赋值：

var length = imgs.length; 
i = (i === length - 1) ? 0 : i + 1;

如果i是数组的最后一个索引，设置i为0，否则设置i给自己加一个。再也没有任何疯狂的逻辑可以跳出来，弄清楚你是如何到达那里的。

来源

2012-08-17 00:07:11 Norguard

+1 Norguard，你的方式比OP的例子好得多。但是，请记住，如果使用单一行，只有当我重置为0时设置断点就更困难了，在这种情况下，您可能很想做到这一点。我也使用三元组，但从来没有时，我可能只想在其中一个条件上设置断点。 – 2012-08-17 00:18:30

当然。但功能只做三件事。让作业变得简单易行，可以直观地调试东西。就像我之前提到的那样，如果在函数中设置了六个变量，这会导致3深度嵌套if和if-else嵌套，如果情况是三元赋值，所有这些都会在几秒钟内变平，所以你首先不太可能需要那里的断点，而您可以专注于打破操控。 – Norguard 2012-08-17 00:23:45

同意，我编辑了我的答案，指出你的可能是最好的方式取决于情况。 – 2012-08-17 00:26:40

请解释Javascript图像旋转代码

回答

相关问题