Question

在@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的更新命令，然后再显示toast消息，以便ajax有时间获取$.get("updatetable.php"数据我只是'理解为什么它会在获取数据时锁定浏览器？它试图触发其他命令，那是什么导致了LAG？

以下是步骤

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>

Answer 1

也许您应该考虑切换到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);

然后你可以保留async: 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])，因为如果你在返回它之前对服务器上的表进行排序，你就不需要运行它了，我几乎可以确定它是瓶颈所在。

Answer 2

很难解决你所拥有的混乱，但如果你想要的是每10秒一次的ajax请求，那么将这个逻辑与业务逻辑分离出服务器上的数据是有意义的。

您的代码也将从使用promises中受益。考虑这个例子

 $(document).ready(function() {

     var myData = {  }
      , ajaxPromise = null


     setInterval(callServer, 1000)


     function callServer() {

        ajaxPromise = updateCall()
                       .then(controlCall)
                       .done(handler)
                       .error(errorHandler) 
     }
     function updateCall() {
       return $.get('updateTable.php', function(data) {
          myData.update = data
       })
     } 

     function controlCall( ) {
       return $.get('ajaxControl.php', function(data) {
          myData.control = data
       })
     }

     function handler() {
       console.dir(myData)
     }

     function errorHandler(err) {
        console.log(err)
        console.dir(myData)         
     }
 })

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

2 个答案: