jQuery的查找和替换被挂断的浏览器！数据尺寸过大？过大、尺寸、浏览器、数据

2023-09-10 17:22:05 作者：花开堪折直须折

使用了很多的帮助，从@kalley我们已经发现，如果我评论如下两行了LAG走了！

 变量$ tableContents = $ table.find（'TBODY）
 变量$的HTML = $（'＆LT; TBODY /＆GT;'）。HTML（数据）;

但我怎么保留以上，但抵消LAG？的

更多信息：下面的作品，但问题的code是， $。GET 导致浏览器挂起，直到AJAX请求完成。我需要（流量控制？）或东西，将解决这个问题没有锁定/挂断浏览器，直到AJAX完成的GET请求。

最大的LAG /闭锁/亨是 $。获得（updatetable.php，因为别人只返回小于或等于7（数）值而这一次（updatetable.php'）返回很多更（200-300kb）。我想在这里实现某种流量控制或使脚本等待像5秒前点火的tablesort update命令并显示，这样的敬酒消息之前AJAX有时间来获得 $。获得（updatetable.php数据我只是不明白为什么它升起的浏览器，因为它是获取数据？是试图触发其他命令，这就是什么导致LAG？

下面是步骤

1 $得到（getlastupdate.php将触发每隔10秒左右检查日期和时间是否返回的数据看起来像这样一样： 20130812092636 的格式为：YYYmmddHHmmss

2 如果日期和时间是不一样的最后的GET然后 $。获得（getlastupdate2.php将触发与这数据将被发回，并放入一个烤面包。消息，dispalyed用户 $（）toastmessage（'showNoticeToast，Vinfoo ）;

3。之前或之后上述（ $得到（getlastupdate2.php）的另一个得到的将火。 $得到（'updatetable.php这将得到更新后的表信息，并更换旧与新的信息，然后更新/再打表

4。在这一切我想要的结束 $。获得（ajaxcontrol.php这将返回1或2，如果用户登录的话这将是一个2否则它是一个1，这会破坏会话，并注销用户。

 ＆LT;脚本类型=文/ JavaScript的SRC =的tablesorter / jQuery的-1.10.2.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =的tablesorter /最后的/ jquery.tablesorter.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =的tablesorter /最后的/ jquery.tablesorter.widgets.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =的tablesorter /决赛/ toastmessage / jquery.toastmessage-min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =的tablesorter / qtip / jquery.qtip.min.js＆GT;＆LT; / SCRIPT＆GT;

    ＆LT;脚本类型=文/ JavaScript的＆GT;
        VAR康珀;
    功能checkSession（）{
        返回$获得（ajaxcontrol.php功能（DblIn）{
            的console.log（'检查会话'）;
            如果（DblIn == 1）{
                了window.location ='loggedout.php';
            }
        }），然后（updateTable）。
    }

    功能checkComper（）{
        VAR SvInfo;
        VAR onResponse =功能（comperNow）{
            如果（康珀===未定义）{
                康珀= comperNow;
            }否则，如果（康珀！== comperNow）{
                VAR Vinfoo;
                康珀= comperNow;
                //返回此$不用彷徨将延迟进行，直至做到这一点。
                返回$获得（getlastupdate2.php功能（primaryAddType）{
                    Vinfoo = primaryAddType;
                    $（）toastmessage（'showNoticeToast'，Vinfoo）;
                }），然后（checkSession）。
            }
        };
        $获得（'getlastupdate.php'），然后（onResponse）.done（函数（）{
            TID = setTimeout的（checkComper，2000年）;
        }）;
    }


    传播updateTable（）{
        返回$获得（'updatetable.php'，功能（数据）{
            的console.log（更新表）;
变量$表= $（table.tablesorter）;
            变量$ tableContents = $ table.find（'TBODY）
            变量$的HTML = $（'＆LT; TBODY /＆GT;'）。HTML（数据）;
              $ tableContents.replaceWith（'＆LT; TBODY＆GT;'+数据+'＆LT; / TBODY＆GT;'）
            //$tableContents.replaceWith($html）
            $ table.trigger（更新，[真]）;
            VAR currentUrl =的document.getElementById（frmcontent）contentWindow.location.href。
            变种网址= ['indexTOM.php'，'index1.php']，
                帧=的document.getElementById（'frmcontent'）contentDocument。

            对于（VAR I = 0; I＆LT; urls.length;我++）{
                VAR URL =网址[I]
                如果（frame.location.href.indexOf（URL）！== -1）{
                    frame.location.reload（）
                }
            }

            $（'[！标题=]）qtip（{}）;
        }）;

    };


    $（函数（）{
    VAR TID = setTimeout的（checkComper，2000年）;


    $（＃追加）。点击（函数（五）{
        //我们假设这是一个用户操作
        即preventDefault（）;
        updateTable（）;
    }）;

            //调用tablesorter插件
            $（table.tablesorter）。tablesorter的（{
                主题：'蓝'，
                //隐藏滤波器的输入/选择将调整列，因此要尽量减少变化
                widthFixed：真正的，
                //初始化斑马条纹和过滤器部件
                小工具：saveSort，斑马，过滤器]，
                标题：{
                    8：{
                        分拣机：假的，
                        过滤：假的
                    }
                }，
                widgetOptions：{
                    filter_childRows：假的，
                    filter_columnFilters：真正的，
                    filter_cssFilter：tablesorter的过滤器'，
                    filter_filteredRow：'过滤'，
                    filter_formatter：空，
                    filter_functions：空，
                    filter_hideFilters：假的，//真，（见注在以上选项部分）
                    filter_ignoreCase：真正的，
                    filter_liveSearch：真正的，
                    filter_reset：button.reset，
                    filter_searchDelay：300，
                    filter_serversideFiltering：假的，
                    filter_startsWith：假的，
                    filter_useParsedData：假的
                }
            }）;

            //外部搜索
            $（'button.search）。点击（函数（）{
                VAR过滤器= []，
                    COL = $（本）的.data（'过滤柱），//从零开始的索引
                    TXT = $（本）的.data（'过滤文本）; //文本添加到过滤
                过滤器[COL] = TXT;
                $ .tablesorter.setFilters（$（'table.hasFilters'），过滤器，真正的）; //新V2.9
                返回false;
            }）;
       }）;
    ＆LT; / SCRIPT＆GT;

解决方案

也许，而不是使用的setInterval ，你应该考虑切换到的setTimeout 。它会给你过到时重复更多的控制权：

 函数checkComper（）{
    VAR SvInfo;
    VAR onResponse =功能（comperNow）{
        如果（康珀===未定义）{
            康珀= comperNow;
        }否则，如果（康珀！== comperNow）{
            VAR Vinfoo;
            康珀= comperNow;
            //返回此$不用彷徨将延迟进行，直至做到这一点。
            返回$获得（getlastupdate2.php功能（primaryAddType）{
                Vinfoo = primaryAddType;
                $（）toastmessage（'showNoticeToast'，Vinfoo）;
            }），然后（checkSession）。
        }
    };
    $获得（'getlastupdate.php'），然后（onResponse）.done（函数（）{
        TID = setTimeout的（checkComper，10000）;
    }）;
}

VAR TID = setTimeout的（checkComper，10000）;

然后你可以把它异步：真正的

下面是一个拨弄显示它的工作使用echo.jsontest.com和一些捏造的数字。

由于点击事件回调似乎是那里的问题是，尝试这样做，看看它消除了延迟（我删除了其他意见，使之更加简单）

 函数checkSession（）{
    返回$获得（ajaxcontrol.php功能（DblIn）{
        的console.log（'检查会话'）;
        如果（DblIn == 1）{
            了window.location ='loggedout.php';
        }
    }），然后（updateTable）。
}
传播updateTable（）{
    返回$获得（'updatetable.php'，功能（数据）{
        的console.log（更新表）;
        变量$ tableContents = $ table.find（'TBODY）
        //变量$的HTML = $（'＆LT; TBODY /＆GT;'）。HTML（数据）;
        //$tableContents.replaceWith($html）;

        // replaceWith文字似乎是要快得多：
        // http://jsperf.com/jquery-html-vs-replacewith/4
        $ tableContents.replaceWith（'＆LT; TBODY'＆GT; +数据+'＆LT; / TBODY＆GT;'）;

        //$table.trigger("update，[真]）;
        VAR currentUrl =的document.getElementById（frmcontent）contentWindow.location.href。
        变种网址= ['indexTOM.php'，'index1.php']，
            帧=的document.getElementById（'frmcontent'）contentDocument。

        对于（VAR I = 0; I＆LT; urls.length;我++）{
            VAR URL =网址[I]
            如果（frame.location.href.indexOf（URL）！== -1）{
                frame.location.reload（）
            }
        }

        $（'[！标题=]）qtip（{}）;
    }）;

};

$（＃追加）。点击（函数（五）{
    //我们假设这是一个用户操作
    即preventDefault（）;
    updateTable（）;
}）;

我注释掉 $ table.trigger（更新，[真]）因为如果你对表进行排序，然后再返回它在服务器上，你不应该需要运行，这我几乎可以肯定的是，其中的瓶颈。

With alot of help from @kalley we have found out that If I comment the following two lines out the LAG is gone!

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

But how do I keep the above but cancel out the LAG ?

MORE INFO: The code below works but the problem is that the $.GET is causing the browser to hang until the ajax request completes. I need (flow control?) or something that will solve this problem without locking/hanging up the browser until ajax completes the GET request.

The biggest LAG/Lockup/Hang is at $.get("updatetable.php", since the others only return 7 or less (number) values and this one ('updatetable.php') returns alot more (200-300kb). I would like to implement some sort of flow control here or make the script wait like 5 secs before firing the update command for tablesort and before showing the toast message so that ajax has time to GET the $.get("updatetable.php"data I just don't understand why does it lockup the browser as it is getting the data? is it trying to fire the other commands and that's whats causing the LAG?

Here are the STEPS

1. $.get("getlastupdate.php" Will fire every 10 secs or so to check if the date and time are the same the return data looks like this: 20130812092636 the format is: YYYmmddHHmmss.

2. if the date and time are not the same as the last GET then $.get("getlastupdate2.php" will trigger and this data will be send back and placed into a toast message and dispalyed to the user $().toastmessage('showNoticeToast', Vinfoo);

3. before or after the above ($.get("getlastupdate2.php") another GET will fire: $.get('updatetable.php' this will GET the updated table info. and replace the old one with the new info. and then update/resort the table

4. at the end of it all I want to $.get("ajaxcontrol.php" and this will return a 1 or 2 if the user is logged in then it will be a 2 else it's a 1 and it will destroy the session and log the user out.

    <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>

解决方案

Maybe instead of using setInterval, you should consider switching to setTimeout. It will give you more control over when the time repeats:

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);

Then you can keep it async: true

Here's a fiddle showing it working using echo.jsontest.com and some fudging numbers.

Since the click event callback seems to be where the issue is, try doing this and see if it removes the lag (I removed other comments to make it more brief):

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

I commented out $table.trigger("update", [true]) since if you sort the table on the server before you return it, you shouldn't need to run that, which I'm almost certain is where the bottleneck is.

上一篇：使用Ajax扩展错误的asp.net 4.0错误、Ajax、asp、net

下一篇：Ajax和后退按钮。哈希的变化，但在这里是previous页面的状态存储在哪里？但在、按钮、状态、页面

相关推荐