功能在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。