Javascript 我得到了一个错误：太多的递归。为什么呢？

我有一个刷新页面上图表的功能。其思想是它不断循环并刷新名为

salt

的变量。变量在单独的文件中定义，称为

path

，

displayTimeFrom

，

selectedTimeRangeType

和

target

。以下是循环代码，它也响应GUI中的更改：

$(function () {
    refreshGraphs();
});

var refreshGraphs = function () {
    d = new Date();

    var graphiteUrl = graphs.path + "render/?_salt" + d.getTime()
                + "&from=-" + graphs.displayTimeFrom
                + graphs.selectedTimeRangeType
                + "&minXStep=0"
                + "&until=now&height=800&";

    $('#graph-middle').prop("src", graphiteUrl + graphs.target);

    setIntervalAndExecute(refreshGraphs, 30000); // refresh every 30000 milliseconds aka every 30 seconds

    // Execute immediately and after the interval (setInterval only starts after certain amount of time)
    function setIntervalAndExecute(fn, t) {
        fn();
        return (setInterval(fn, t));
    }

    // Change graph to chosen value
    $('#graph-middle').on('click', '#displayTimeFrom', function () {
        graphs.displayTimeFrom = $(this).text();
        refreshGraphs();
    });

    $('#graph-middle').on('click', '#selectedTimeRangeType', function () {
        graphs.selectedTimeRangeType = $(this).text();
        refreshGraphs();
    });
};

当我运行它时，它会说

“太多递归”

。这是为什么？我如何解决它？

您的

刷新图（）

函数每次运行时都会立即（通过

setIntervalAndExecute（）

）调用自身。

需要注意两件事：
1.您正在递归调用

refreshGraphs（）

。
2.您已将

单击
处理程序放置在
refreshGraphs（）
函数中

因此，每当调用此
refreshGraphs（）
时，它都会再次绑定
click
事件，而不会解除前一个事件的绑定。您必须解除上一个的绑定，或者将它们放在
$（function（）{}）
中

试试这些

$(function () {
    refreshGraphs();
    // Change graph to chosen value
    $('#graph-middle').on('click', '#displayTimeFrom', function () {
        graphs.displayTimeFrom = $(this).text();
        refreshGraphs();
    });

    $('#graph-middle').on('click', '#selectedTimeRangeType', function () {
        graphs.selectedTimeRangeType = $(this).text();
        refreshGraphs();
    });
});

var refreshGraphs = function () {
    d = new Date();

    var graphiteUrl = graphs.path + "render/?_salt" + d.getTime()
                + "&from=-" + graphs.displayTimeFrom
                + graphs.selectedTimeRangeType
                + "&minXStep=0"
                + "&until=now&height=800&";

    $('#graph-middle').prop("src", graphiteUrl + graphs.target);

    setIntervalAndExecute(refreshGraphs, 30000); // refresh every 30000 milliseconds aka every 30 seconds

    // Execute immediately and after the interval (setInterval only starts after certain amount of time)
    function setIntervalAndExecute(fn, t) {
        fn();
        return (setInterval(fn, t));
    }
};

或

解决方案是在匿名函数中调用jQuery，而不是refreshGraps命名空间。问题已解决。
最好解释一下您更改了什么以及更改的原因，而不是让OP疑惑。我已编辑了我的答案。请确认这不是问题所在。由于等待时间为30秒，因此允许此递归。问题是refreshgraphs函数中的jQuery绑定。一旦我把它们放在匿名函数的顶部（文档准备就绪），一切都很好。@user2609980:No；
fn（）
调用也会立即运行它。好吧，当我将jQuery代码放在
$（function（）
）中时，这不是一个问题。我正在再次查看代码。现在我看到您一定是对的。通过将
setIntervalAndExecute
移动到
$function（）
并且在
refreshGraphs
之外，我想我已经确保了
fn（）
的立即和递归执行只被调用一次（现在无法访问代码，所以不确定解决方案到底是什么）。我稍后会看一看。尽管代码连续几个月都运行良好（也就是说，它每30秒刷新一次图表…）我想知道jQuery是否调用
refreshGraphs（）
进行了某种复杂的循环，这种循环可以正常工作。
$(function () {
    refreshGraphs();
});

var refreshGraphs = function () {
    d = new Date();

    var graphiteUrl = graphs.path + "render/?_salt" + d.getTime()
                + "&from=-" + graphs.displayTimeFrom
                + graphs.selectedTimeRangeType
                + "&minXStep=0"
                + "&until=now&height=800&";

    $('#graph-middle').prop("src", graphiteUrl + graphs.target);

    setIntervalAndExecute(refreshGraphs, 30000); // refresh every 30000 milliseconds aka every 30 seconds

    // Execute immediately and after the interval (setInterval only starts after certain amount of time)
    function setIntervalAndExecute(fn, t) {
        fn();
        return (setInterval(fn, t));
    }

    // Change graph to chosen value
    $('#graph-middle').off('click').on('click', '#displayTimeFrom', function () {
        graphs.displayTimeFrom = $(this).text();
        refreshGraphs();
    });

    $('#graph-middle').off('click').on('click', '#selectedTimeRangeType', function () {
        graphs.selectedTimeRangeType = $(this).text();
        refreshGraphs();
    });
};