請解釋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圖像旋轉代碼

回答

相關問題