AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

javascript – jQuery查找和替换是挂起浏览器！数据量太大了？

分类：Ajax作者：编程之家原文地址

在@kalley的帮助下,我们发现如果我评论以下两行LAG就不见了！

 var $tableContents = $table.find('tbody')
 var $html = $('<tbody/>').html(data);

但是我如何保持上述但取消LAG？

更多信息：
下面的代码有效,但问题是$.GET导致浏览器挂起,直到ajax请求完成.我需要(流量控制？)或解决此问题的东西,而不会锁定/挂起浏览器,直到ajax完成GET请求.

最大的LAG / Lockup / Hang是$.get(“updatetable.PHP”,因为其他只返回7或更少(数字)值,而这一个(‘updatetable.PHP’)返回的更多(200-300kb).我想在这里实现某种流控制或使脚本等待5秒,然后再触发tablesort的update命令并显示toast消息,以便ajax有时间获取$.get(“updatetable.PHP”数据)我只是不明白为什么它会锁定浏览器,因为它正在获取数据？它是否试图触发其他命令,那是什么导致了LAG？

这是STEPS

1.
$.get(“getlastupdate.PHP”将每隔10秒左右触发一次,以检查日期和时间是否相同,返回数据如下所示：20130812092636格式为：YYYmmddHHmmss.

2.
如果日期和时间与最后一个GET不同,那么$.get(“getlastupdate2.PHP”将触发,这些数据将被发回并放入一个Toast消息并显示给用户$().toastmessage(‘ showNoticetoast’,Vinfoo);

3.
在上面之前或之后($.get(“getlastupdate2.PHP”),另一个GET将触发：$.get(‘updatetable.PHP’这将获取更新的表信息.并用新信息替换旧信息.然后更新/采取表格

4.
在它的最后我想要$.get(“ajaxcontrol.PHP”,如果用户登录将返回1或2然后它将是2否则它是1并且它将破坏会话和日志用户出局.

    <script type="text/javascript" src="tablesorter/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="tablesorter/final/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="tablesorter/final/jquery.tablesorter.widgets.js"></script>
    <script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"></script>
    <script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"></script>

    <script type="text/javascript">
        var comper;
    function checkSession() {
        return $.get("ajaxcontrol.PHP", function (DblIn) {
            console.log('checking for session');
            if (DblIn == 1) {
                window.location = 'loggedout.PHP';
            }
        }).then(updateTable);
    }

    function checkComper() {
        var SvInfo;
        var onResponse = function (comperNow) {
            if (comper === undefined) {
                comper = comperNow;
            } else if (comper !== comperNow) {
                var Vinfoo;
                comper = comperNow;
                // returning this $.get will make delay done until this is done.
                return $.get("getlastupdate2.PHP", function (primaryAddType) {
                    Vinfoo = primaryAddType;
                    $().toastmessage('showNoticetoast', Vinfoo);
                }).then(checkSession);
            }
        };
        $.get('getlastupdate.PHP').then(onResponse).done(function () {
            tid = setTimeout(checkComper, 2000);
        });
    }


    function updateTable() {
        return $.get('updatetable.PHP', function (data) {
            console.log('update table');
var $table = $("table.tablesorter");
            var $tableContents = $table.find('tbody')
            var $html = $('<tbody/>').html(data);
              $tableContents.replaceWith('<tbody>' + data + '</tbody>')
            //$tableContents.replaceWith($html)
            $table.trigger("update", [true]);
            var currentUrl = document.getElementById("frmcontent").contentwindow.location.href;
            var urls = ['indexTOM.PHP', 'index1.PHP'],
                frame = document.getElementById('frmcontent').contentDocument;

            for (var i = 0; i < urls.length; i++) {
                var url = urls[i];
                if (frame.location.href.indexOf(url) !== -1) {
                    frame.location.reload()
                }
            }

            $('[title!=""]').qtip({});
        });

    };


    $(function () {
    var tid = setTimeout(checkComper, 2000);


    $("#append").click(function (e) {
        // We will assume this is a user action
        e.preventDefault();
        updateTable();
    });

            // call the tablesorter plugin
            $("table.tablesorter").tablesorter({
                theme: 'blue',
                // hidden filter input/selects will resize the columns, so try to minimize the change
                widthFixed: true,
                // initialize zebra striping and filter widgets
                widgets: ["saveSort", "zebra", "filter"],
                headers: {
                    8: {
                        sorter: false,
                        filter: false
                    }
                },
                widgetoptions: {
                    filter_childRows: false,
                    filter_columnFilters: true,
                    filter_cssFilter: 'tablesorter-filter',
                    filter_filteredRow: 'filtered',
                    filter_formatter: null,
                    filter_functions: null,
                    filter_hideFilters: false, // true, (see note in the options section above)
                    filter_ignoreCase: true,
                    filter_liveSearch: true,
                    filter_reset: 'button.reset',
                    filter_searchDelay: 300,
                    filter_serversideFiltering: false,
                    filter_startsWith: false,
                    filter_useParsedData: false
                }
            });

            // External search
            $('button.search').click(function () {
                var filters = [],
                    col = $(this).data('filter-column'), // zero-based index
                    txt = $(this).data('filter-text'); // text to add to filter
                filters[col] = txt;
                $.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9
                return false;
            });
       });
    </script>

解决方法:

也许不应该使用setInterval,而应该考虑切换到setTimeout.它可以让您更好地控制重复时间：

function checkComper() {
    var SvInfo;
    var onResponse = function (comperNow) {
        if (comper === undefined) {
            comper = comperNow;
        } else if (comper !== comperNow) {
            var Vinfoo;
            comper = comperNow;
            // returning this $.get will make delay done until this is done.
            return $.get("getlastupdate2.PHP", function (primaryAddType) {
                Vinfoo = primaryAddType;
                $().toastmessage('showNoticetoast', Vinfoo);
            }).then(checkSession);
        }
    };
    $.get('getlastupdate.PHP').then(onResponse).done(function () {
        tid = setTimeout(checkComper, 10000);
    });
}

var tid = setTimeout(checkComper, 10000);

然后你可以保持异步：true

这是一个fiddle,显示它使用echo.jsontest.com和一些捏造数字.

由于click事件回调似乎是问题所在,尝试执行此操作并查看是否删除了滞后(我删除了其他注释以使其更简短)：

function checkSession() {
    return $.get("ajaxcontrol.PHP", function (DblIn) {
        console.log('checking for session');
        if (DblIn == 1) {
            window.location = 'loggedout.PHP';
        }
    }).then(updateTable);
}
function updateTable() {
    return $.get('updatetable.PHP', function (data) {
        console.log('update table');
        var $tableContents = $table.find('tbody')
        //var $html = $('<tbody/>').html(data);
        //$tableContents.replaceWith($html);

        // replaceWith text seems to be much faster:
        // http://jsperf.com/jquery-html-vs-replacewith/4
        $tableContents.replaceWith('<tbody'> + data + '</tbody>');

        //$table.trigger("update", [true]);
        var currentUrl = document.getElementById("frmcontent").contentwindow.location.href;
        var urls = ['indexTOM.PHP', 'index1.PHP'],
            frame = document.getElementById('frmcontent').contentDocument;

        for (var i = 0; i < urls.length; i++) {
            var url = urls[i];
            if (frame.location.href.indexOf(url) !== -1) {
                frame.location.reload()
            }
        }

        $('[title!=""]').qtip({});
    });

};

$("#append").click(function (e) {
    // We will assume this is a user action
    e.preventDefault();
    updateTable();
});

我注释掉了$table.trigger(“update”,[true]),因为如果你在返回它之前对服务器上的表进行排序,你就不需要运行它,我几乎可以肯定这是瓶颈所在的地方. .

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native