javascript - 每 x 秒执行一次 setTimeout 和 Ajax 时内存泄漏

Question

我使用 jQuery Ajax 和 setTimeout() 每隔 x 秒获取一次新数据，这会导致内存泄漏。浏览器内存在每次 Ajax 调用时不断增加，直到浏览器崩溃。

$(document).ready(wp.state.init);

wp.state = {

    data: {},

    init: function () {
        $.PubSub('state:refresh').subscribe(function () {
            window.setTimeout(function () {
                wp.state.refresh();
            }, 1000);
        });

        this.refresh();
    },

    refresh: function () {

        $.ajax({
            url: 'http://url_here/',
            cache: false,
            dataType: "json",
            success: function (data) {
                wp.state.data = data;
                $.PubSub('state:refresh').publish();
            }
        });
    }
}

更新(基于@dez 回答)

wp.state = {

    data: {},

    init: function () {
        $.PubSub('state:refresh').subscribe(function () {
            window.setTimeout(wp.state.refresh, 1000);
        });

        this.getState();
    },

    refresh: function () {
        wp.state.getState();
    },

    onSuccess: function (data) {
        wp.state.data = data;
        $.PubSub('state:refresh').publish();
    },

    getState: function () {

        $.ajax({
            url: 'http://url_here/',
            cache: false,
            dataType: "json",
            success: this.onSuccess
        });
    }
}

注意事项:

• 发布者/订阅者 ($.PubSub) 实现形式 here .内存泄漏也在实现 PubSub 之前发生，因此它显然不相关。
• setTimeout 用于代替 setInterval，以便仅在旧 Ajax 调用成功后才执行新的 Ajax 调用。
• 当然还有其他函数监听'state:refresh'并使用wp.state.data
中的数据

Answer 1

我可以在这里看到几个问题，其中一些可能会导致您的内存泄漏。

对于初学者来说，第一行:

$(document).ready(wp.state.init);

这不会在正确的范围内执行 init，因此 this 的值将在以下行中未定义:

this.refresh();

你应该做这样的事情:

$(document).ready(function(){wp.state.init();});

或将您的 this.refresh() 修改为明确的 wp.state.refresh()。

我认为可能导致泄漏的位是...

每次您在 refresh 中调用 $.ajax 时，您都会创建一个新函数来处理成功回调。您应该将回调定义为 wp.state 对象上的另一个函数，并将其作为 success 以与传递 wp.state.init 相同的方式传递 到当前的 ready() 方法。

类似地，每次您在订阅您的 PubSub 的函数中调用 window.setTimeout 时，您也在创建一个函数来处理该回调。您应该在这里做同样的事情，并将其提取到 wp.state 上的函数中。