Question

我创建了一个网页，通过jQuery $.ajax调用显示从数据库中检索到的数据。该网页是数字标牌系统的一部分，将不断显示。

$.ajax响应格式化为HTML生成的服务器端。然后，在从div删除任何现有HTML后，将此HTML插入div元素。

然后我将jQuery选框插件（http://aamirafridi.com/jquery/jquery-marquee-plugin）附加到div类的新创建的.marquee元素中。

var marqueeCounter = 0;
var appBusy = false;

function update() {
    if (appBusy == false) {
        $.ajax({
            url: '/get/html/from/server',
            cache: false,
            success: function (response) {
                $('#div-container').empty();
                $('#div-container').html('');
                $('#div-container').html(response);

                $('.marquee').each(function () {
                    $(this).width($(this).parent().width());
                });

                $('.marquee').bind('beforeStarting',function () {
                    appBusy = true;
                    marqueeCounter++;
                }).bind('finished', function () {
                    $(this).marquee('pause');
                    marqueeCounter--;
                    if (marqueeCounter < 1) {
                        appBusy = false;
                    }
                }).marquee({
                    duration: 3500,
                    allowCss3Support: true,
                    duplicated: false
                });
            }
        });
    }

    setTimeout(update, 5000);
}

我面临的问题是，在运行此应用程序数小时后，游戏币逐渐变慢，最终浏览器（firefox）崩溃。

查看firefox和chrome中的内存使用情况，每个$.ajax调用替换的元素似乎都不会从内存中释放出来，最终会阻塞浏览器。

DOM元素数量和内存使用量一样上升。

我可能在这里做了一些根本性的错误但却无法弄清楚如何释放这些资源。

感谢。

编辑1： 我已尝试使用开发者页面上的示例插件destroy方法，但它没有帮助。

我删除了对插件的引用，导致以下代码：

function update() {
    if (appBusy == false) {
        $.ajax({
            url: '/get/html/from/server',
            cache: false,
            success: function (response) {
                $('#div-container').empty();
                $('#div-container').html(response);
                }
        });
    }

    setTimeout(update, 5000);
}

节点数量继续增长并且永不减少。

编辑2： 我已经在原生javascript中重写了这个函数，问题似乎已经消失了。

function update()
    {
    if (window.XMLHttpRequest)
        {
        xmlhttp = new XMLHttpRequest();
        }
        else    {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
                }

    xmlhttp.onreadystatechange = function()
                                    {
                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                        {
                                        document.getElementById("div-container").innerHTML = xmlhttp.responseText;
                                        }
                                    }

    xmlhttp.open("GET", "/get/html/from/server", true);
    xmlhttp.send();

    setTimeout(update, 5000);
    }

为什么jQuery会返回不同的结果？

释放由ajax请求创建的DOM元素内存/资源

0 个答案: