Javascript a href链接上的jQuery颜色循环（超过最大调用堆栈大小，Firefox出现问题。）

我正在尝试制作一个页面，该页面将通过一个颜色表为

a href

链接设置动画，效果良好且流畅。我目前在使用的代码中有两个问题，其中一个问题与糟糕的代码有关（请注意，JavaScript和jQuery我非常不擅长）。我希望一些大师能花2分钟让我知道问题所在或提供更好的解决方案。（提前谢谢）

遇到的问题：

未捕获范围错误：超过最大调用堆栈大小

Firefox不平滑，而Chrome则平滑（Firefox只是改变颜色）。

有些颜色太暗了

性能似乎是个问题，可能是因为最大堆栈大小错误

图书馆：

jQuery.v1.10.2.min.js

jQuery.color-2.1.0.js

代码：

我需要的是：

基本上我所需要的是一个脚本，将动画从一个颜色到另一个页面上的所有链接每2秒或更多。。。平稳地理想情况下，我希望能够选择6种或更多的颜色，我知道这是可行的，但由于我在JavaScript方面的知识有限，我不知道从哪里开始

js正在运行的代码的中间部分

---

我制作了一个jsfiddle，希望能节省任何人的时间，或者只是检查当前输出的样子：是的，您正在无限期地递归调用，这将很快耗尽堆栈空间。相反，您希望浏览器定期调用您的颜色更改功能。我们将使用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);
});

---

是的，您正在无限期地递归调用，这将很快耗尽堆栈空间。相反，您希望浏览器定期调用您的颜色更改功能。我们将使用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);
});

---

是的，您正在无限期地递归调用，这将很快耗尽堆栈空间。相反，您希望浏览器定期调用您的颜色更改功能。我们将使用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);
});

---

是的，您正在无限期地递归调用，这将很快耗尽堆栈空间。相反，您希望浏览器定期调用您的颜色更改功能。我们将使用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);
});

---

自从你昨天发布你的问题以来，我一直在研究这个问题，我想我应该试一试，这样我就可以了解一些关于setTimeout的知识。天哪，我已经明白了——这么一个“简单”命令的复杂性。这可能是我在javascript中遇到的最困难的问题

因此，我提出我的“答案”只是作为一个可以观察的东西，而乔拉克的答案显然更优越

这显示加载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]);
}

对于像我这样正在阅读本文的其他noob，我学到了一些在任何文档中都没有明确说明的东西（我访问了30-40个站点，这些都没有太大帮助）

如果你试图把一个计时器放在一个循环中，它的行为是不直观的。我习惯于基本循环，当你做一些事情来停止循环时——奇怪的是——它停止了！：-）。javascript则不然。作为一个实验，我做了一个循环，里面有一个setTimeout，然后把循环的I放在一个div中。多么混乱啊！在第一次设置超时完成之前，循环打印出所有的i！我读到循环实际上是为setTimeout的每个循环创建不同的计时器。灾难

您可以使用clearTimeout（timer名称）停止计时器

我猜如果你有一个停止计时器的例程，它可以用setTimeout（nameoftimer）在例程的底部重新启动

我仍然没有弄明白为什么变量赋值，比如var timer=setTimeout（alert（'hello'），1000）；不仅会将变量分配给代码，还会运行代码。不直观

在浏览了所有的网站并尝试了他们的代码之后，我去了W3Schools（很多人都不很尊重），发现代码确实有效！我的小提琴就是从中衍生出来的

---

无论如何，谢谢你的提问。我学到了很多

自从你昨天发布你的问题以来，我一直在研究这个问题，我想我应该试一试，这样我就可以了解一下setTimeout。天哪，我已经明白了——这么一个“简单”命令的复杂性。这可能是我在javascript中遇到的最困难的问题

因此，我提出我的“答案”只是作为一个可以观察的东西，而乔拉克的答案显然更优越

这显示加载DOM后计时器（runmytimer）的启动。它随机更改两个div的背景色。我让它运行了一个多小时，它似乎没有崩溃

我添加了“额外”内容，以确保页面上的其他内容不会干扰计时器。所以当你输入一个