功能在Chrome中運行，但不在Firefox中運行說功能未定義

Question

該代碼在Chrome中運行完美，但Firefox說功能tile1未定義。可能是什麼問題呢？

另外，有沒有什麼辦法縮短這個功能？我曾嘗試在tile1以及if-else聲明中使用for循環，但我沒有成功。

$('div.tile').each(function(index, element) { 
    for(var i=0;i<=index;i++){ 

    var tile1=function(){ 
    var one ="div.tile div.one"; 
    var two =" div.tile div.two"; 
    var three = "div.tile div.three"; 
    if(index==0){ 
     one="div.tile div.one"; 
     two="div.tile div.two"; 
     three="div.tile div.three"; 
    } else { 
     one ="div.tile div.one"+index; 
     two ="div.tile div.two"+index; 
     three ="div.tile div.three"+index; 
    } 
     var $one=$(one); 
     var $two = $(two); 
     var $three=$(three); 
     var oneTop = $one.top; 
     var twoTop = $two.top; 
     var threeTop = $three.top; 
     delayRate += 3000; // delayRate 5 sec (5000) by default 

    $one 
     .delay(delayRate) 
     .animate({top: "-100.5%"},300,easing); 
    $two 
     .delay(delayRate) 
     .animate({top:"0%"},300,easing); 
    $three 
     .delay(delayRate) 
     .animate({top:"100.5%"},300,easing);  

    $one 
     .delay(12000) 
     .animate({top: "-200.5%"},300,easing); 
    $two 
     .delay(12000) 
     .animate({top:"-100.5%"},300,easing); 
    $three 
     .delay(12000) 
     .animate({top:"0"},300,easing); 

    $one 
     .delay(12000) 
     .animate({top: "-100.5%"},300,easing); 
    $two 
     .delay(12000) 
     .animate({top:"0"},300,easing); 
    $three 
     .delay(12000) 
     .animate({top:"100.5%"},300,easing); 

    $one 
     .delay(15000-delayRate) 
     .animate({top: "0"},300,easing); 
    $two 
     .delay(15000-delayRate) 
     .animate({top:"100.5%"},300,easing); 
    $three 
     .delay(15000-delayRate) 
     .animate({top:"200.5%"},300,easing); 

    if(i==3){ 
     delayRate=0; 
    } 
    } 
} 
window.setInterval(tile1, 3000); 
}); 

正如我調用該函數的index自帶隨機像0,3,1,2，和有該索引對應於4個格。

Answer 1

不鼓勵在JavaScript中使用函數語句。檢查出Mozilla's page on function scope這對功能語句與函數表達式一個偉大的部分，並指出：

功能可使用任一//函數語句//（在允許的擴展，ECMA-262第3版標準被有條件地限定）或函數構造函數。請注意，ES5中不再允許這樣的函數語句。此外，此功能不能一致地跨瀏覽器工作，因此您不應該依賴它。

事實上，您看到瀏覽器與此代碼之間的差異並不奇怪。

嘗試

var tile1 = function() { 
    ... 
} 

雖然這應該爲你在這裏工作，但它所以只因爲var變量定義高掛。隨着JavaScript的發展，我們開始使用let而不是var，您在調用tile1的循環之外呼叫setInterval時使用tile1將不起作用。

之一時可能出現的問題是，當你使用i內函數內部，你是總是外範圍（循環計數器），其值指的是i單個實例總是等於index。 （編輯：我展示瞭如何解決這個問題。）

在循環中定義函數時一定要非常小心。你真的需要了解封閉和吊裝及相關概念。 tile1可以在循環之外的全局定義嗎？

關於上簡化了代碼結構的問題，我想你會好起來的與var，定義tile1，但我不認爲你需要i是內環。嘗試：

$('div.tile').each(function(index, element) { 
    var tile1 = function() { 
    var one ="div.tile div.one"; 
    . 
    . 
    . 
    if (index === 3) { // CHANGED I TO INDEX HERE. 
     delayRate=0; 
    } 
    } 
    window.setInterval(tile1, 3000); 
}); 

我不確定什麼內部循環購買你。

此外：未來JavaScript版本正在努力處理塊作用域中的函數語句;您可以看到here這是由某些版本的Chrome支持的，但不支持Firefox。

附錄

好了，現在我看到你想要週期在tile1功能三個步驟。雖然可以在函數中放置一個for循環，但JavaScript方法是讓函數每次運行一個動畫步驟。如果需要某種類型的櫃檯，櫃檯應該是外部的。這樣做的一個方法是這樣的：

var tile1 = function (i) { 
    . 
    . 
    // use the value i here as needed 
    . 
    . 
    setTimeout(function() {tile1((i + 1) % 3)}, 3000); 
}; 
tile1(0); 

這樣做是它第一次與值0調用你的瓷磚功能，那麼你以後做你想做的0，你將安排下一幀運行3幾秒後，i = 1。然後3秒鐘左右，然後是2秒鐘，然後是3秒鐘，然後是0.

這裏有一點點漂移，所以你可能想用setInterval。這需要關閉。該解決方案的形式是這樣的：

(function() { 
    var i = 0; 
    var tile1 = function() { 
    . 
    . 
    // use the value i here as needed 
    . 
    . 
    i = (i + 1) % 3; 
    }; 
    setInterval(tile1, 3000); 
}()); 

此代碼是很酷。這是一個匿名函數的調用，它調用setInterval來安排tile1函數每3秒運行一次。每次運行tile1時，它都會使用非本地的i的值，該值在封閉的其餘代碼中隱藏。每次執行tile1都使用正確的值i，然後通過將i更改爲適合下次調用的值完成！

這兩種技術在JavaScript中都很好用。與他們玩得開心。第二個，當然沒有時鐘漂移，所以它可能更好。要使代碼專業化，您可能需要將setInterval的結果分配給變量，以便稍後您可以調用clearInterval。