Question

我有一个刷新页面图形的功能。这个想法是它不断循环并刷新一个名为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();
    });
};

当我运行时，它会显示"too much recursion"。为什么这样，我该如何解决？

Answer 1

您的refreshGraphs()函数每次运行时都会立即调用（通过setIntervalAndExecute()）。

Answer 2

有两点需要注意：
1.你递归地调用refreshGraphs() 2.您已在click函数中放置了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));
    }
};

或者

$(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();
    });
};

Answer 3

解决方案是在匿名函数而不是refreshGraps命名空间中调用jQuery。问题解决了。

我得到错误：递归过多。这是为什么？

3 个答案: