HREF链接上的jQuery颜色周期(超过最大呼叫堆栈大小和Firefox问题.)

Question

我正在尝试制作一个可以通过颜色表来使 a href链接的页面良好且顺利。目前，我使用的代码有2个问题，即我正在使用的是与不良代码有关的整个问题（请注意，JavaScript和jQuery我该死的很弱）。我希望有些大师可以花2分钟的时间，让我知道问题或提供更好的解决方案。（预先感谢。）。

遇到的问题：

1. Uncaught RangeError: Maximum call stack size exceeded
2. Firefox is not smooth while Chrome is (Firefox just changes color).
3. Some hues are too dark
4. Performance seems an issue, maybe this is because of the Maximum stack size error

库：

1. jquery.v1.10.2.2.min.js
2. jquery.color-2.1.0.js

代码：

jQuery(document).ready(function() { 
    spectrum(); 
    function spectrum(){
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        jQuery('body a').animate( { color: hue }, 2000);
    spectrum(); 
    }   
});

我需要的东西：

基本上我需要的只是一个脚本，它将每2秒或更多...顺利地将页面上的所有链接从一种颜色到另一种链接进行动画。理想情况下，我希望能够选择我所知道的6种或更多颜色，但是由于我对JavaScript的了解有限，我不知道从哪里开始。

jsfiddle in Action

我已经制作了一个JSFIDDLE，希望能节省任何人的时间，或者只检查当前输出的外观： http://jsfiddle.net/ebz3x/

Answer 1

是的，您无限期地递归打电话给您，这很快就会使您脱离堆栈空间。相反，您想要的是浏览器定期调用您的颜色更改功能。我们将使用window.setInterval（）来完成。

然后，我们还将创建您想要的六种颜色的数组，我们将随机索引中。要添加更多颜色，只需将它们添加到数组中。

jQuery(document).ready(function() { 
    function spectrum(){
        var colors = [
            'rgb(256,0,0)', //red
            'rgb(0,256,0)', //green
            'rgb(0,0,256)', //blue
            'rgb(256,256,0)', //orange
            'rgb(256,0,256)', //magenta
            'rgb(0,256,256)']; //cyan        
        var hue = colors[(Math.floor(Math.random() * colors.length))];
        jQuery('body a').animate( { color: hue }, 2000);
    }
    var intervalId = window.setInterval(spectrum, 2000);
});

Answer 2

自从您昨天发布以来，我一直在研究您的问题，我想我会试一试，所以我可能会学到一些有关Settimeout的知识。男孩，我学到了 - 关于这种"简单"命令的复杂性。这可能是我在JavaScript中遇到的最困难的。

所以我会呈现我的"答案"，就像要查看的东西一样，Joeclacks的答案显然是优越的。

加载DOM后，此小提琴显示了计时器（RunMyTimer）的启动。它随机更改两个div的背景颜色。我让它运行了一个多小时，似乎不会崩溃。

我添加了"额外"的东西，以确保页面上的其他内容不会干扰计时器。因此，当您输入输入框时，计时器会继续。当您单击"保存"按钮（我只是将输入文本移至另一个DIV）时，计时器继续。

这是相关的JS

var randomcolors = ['#FF00FF','#00FFFF','#FFFF00','#0000FF','#00FF00','#FF0000','#000000','#C0C0C0','#C0C1C1','#CFCHCH','#CCFFCC'];
var timer;
//var timer_is_on = 0;
runmytimer();
$('#saveme').click(function(){
        var moveme = $('#getme').val();
        $('.movemehere').html(moveme);
});
function runmytimer()
{
  t = setTimeout( function(){ runmytimer() }, 1000 );
      random = Math.floor(Math.random() * (11 - 0 + 1)) + 0;
     $('.putmehere1').css('background-color', randomcolors[random]);
     $('.putmehere2').css('background-color', randomcolors[random+1]);
}

对于其他正在阅读本文的菜鸟，我学到了一些在任何文档中都没有明确说明的东西（我去了30-40个网站，这并不是那么有用）。

1. 如果您尝试将计时器放在循环中 - 其行为不是直观的。我习惯了基本的循环，当您做一些事情以停止循环时 - 奇怪的是 - 它停止了！:-)。JavaScript并非如此。作为一个实验，我在其中进行了一个循环，并将循环的i是Div。什么混乱！在第一个SettieMout完成之前，循环打印出了所有i！我读到循环实际上是为Settimeout的每个循环创建一个不同的计时器。灾难！

2. 您可以使用ClearTimeOut停止计时器（nameoftimer）。

3. 我猜想，如果您有一个例程停止计时器，则可以使用Settimeout（nameoftimer）在例程的底部重新启动。

4. 我仍然没有弄清楚为什么诸如var timer = settimeout之类的变量分配（arter（'hello'），1000）;不仅将变量分配给代码，还可以运行代码。不直观。

5. 进入所有站点并尝试他们的代码后，我去了W3Schools（许多人都没有受到高度尊重），发现了实际上有效的代码！我从中得出了小提琴。

无论如何，谢谢您的问题。我学到了很多！