Question

我有一个jQuery脚本，它使用Ajax调用从数据库中提取大约10个不同的html表。脚本以1分钟的间隔重复循环，并在5秒内从MySQL数据库中检索所有数据。

10个中的9个运行脚本完成并且所有表都更新。但是这一次脚本冻结了一半，只刷新了6或7个表。然后我刷新整个页面以获取最新数据。

使用JavaScript控制台我已经设法分析脚本冻结的位置，并在检索除1或2个表之外的大部分数据后发现它在结束时冻结。由于Ajax以异步方式处理请求，因此并不总是与打破脚本的数据相同。

我的第一个想法是Apache或MySQL数据库获取的请求太多而且PHP脚本没有返回数据，冻结了jQuery脚本。

此时网页仅供约4人使用。但是在未来多达50人最有可能使用它，我担心这么多请求可能会破坏整个网站。

以下是1次运行的控制台日志的一部分：

"[15:01:44.283] start" refresh.js:50
"[15:01:44.289] refresh data: timeframe" refresh.js:57
"[15:01:44.292] refresh data: tickets_agent" refresh.js:57
"[15:01:44.296] refresh data: tickets_type" refresh.js:57
"[15:01:44.298] refresh data: tickets_status" refresh.js:57
"[15:01:44.299] refresh data: tickets_prio" refresh.js:57
"[15:01:44.300] refresh data: tickets_critical" refresh.js:57
"[15:01:44.302] refresh data: tickets_high" refresh.js:57
"[15:01:44.302] refresh data: tickets_resolved_agent" refresh.js:57
"[15:01:44.303] refresh data: tickets_resolved_group" refresh.js:57
"[15:01:44.304] refresh data: tickets_new" refresh.js:57
"[15:01:44.305] refresh data: changes_group" refresh.js:57
"[15:01:44.476] update data: timeframe" refresh.js:66
"[15:01:44.656] update data: tickets_critical" refresh.js:66
"[15:01:44.689] update data: tickets_high" refresh.js:66
"[15:01:44.936] update data: tickets_prio" refresh.js:66
"[15:01:44.938] update data: tickets_resolved_group" refresh.js:66
"[15:01:44.965] update data: tickets_resolved_agent" refresh.js:66
"[15:01:45.106] update data: changes_group" refresh.js:66
"[15:01:45.174] update data: tickets_status" refresh.js:66
"[15:01:45.179] update data: tickets_new" refresh.js:66
"[15:01:46.538] update data: tickets_type" refresh.js:66
"[15:01:47.114] update data: tickets_agent" refresh.js:66
"[15:01:47.257] finish" refresh.js:74

正如您所见，脚本从15:01:44开始，并在15:01:47结束。因此从数据库中提取所有需要的数据大约需要4秒 - 其中refresh data =＆＃34;从SQL数据库中提取数据＆＃34;和update data =＆＃34;更新html表格＆＃34; - 它并不总是update与refresh - es的顺序相同。有时它会在update data: changes_group之后冻结，有时会在update data: tickets_status之后冻结。

我还能做些什么来找到脚本冻结的原因，阻止后续请求并要求用户重新加载整个页面？

=== update：这里是jQuery代码

$(document).ready(function() {

    var seconds = 60;
    var timeout = seconds * 1000;
    var items = [ 'timeframe', 
                  'tickets_agent', 
                  'tickets_type', 
                  'tickets_status', 
                  'tickets_prio', 
                  'tickets_critical', 
                  'tickets_high', 
                  'tickets_resolved_agent',
                  'tickets_resolved_group',
                  'tickets_new',
                  'changes_group'];

    load();

    $(".datepick").change(function() {
        process();
    });

    $("#datepickerReset").click(function() {
        process();
    });

    function getNow() {
        var d = new Date();
        var h = ("0"+d.getHours()).slice(-2);
        var m = ("0"+d.getMinutes()).slice(-2);
        var s = ("0"+d.getSeconds()).slice(-2);
        var ms = d.getMilliseconds();

        var t = h + ":" + m + ":" + s + "." + ms;
        var ts = "[" + t + "] ";
        return ts;
    }

    function load() {
        $("#progressbar").animate({ width: "100%" }, timeout, "linear", function() {
            process();
        });
    };

    function process() {
        var timestamp = getNow();
        console.log(timestamp + "start");

        var n = items.length;
        $("#progressbar").stop().css({ width: "0" });
        $("#loading").fadeIn(200);
        $.each( items, function( key, item ) {
            var timestamp = getNow();
            console.log(timestamp + "refresh data: " + item);
            $.ajax({
                url: "view/jquery/refresh.php",
                type: "post",
                data: { item : item },
                dataType: "html"
            })
            .done(function(data) {
                var timestamp = getNow();
                console.log(timestamp + "update data: " + item);
                $("#" + item).animate({ opacity: "0.4" }, 100).promise().done(function() {
                    $("#" + item).html(data).animate({ opacity: "1" }, 100);
                    n -= 1;

                if (n === 0) {
                    $("#loading").fadeOut(200);
                    var timestamp = getNow();
                    console.log(timestamp + "finish");
                    load();
                };
                });
            });
        });
    };
});

ps：我考虑在Ajax调用中使用async: false，但随后控制台会显示有关正在对其进行删除的选项的警告。这使得整个脚本需要花费将近10秒的时间才能完成。

Answer 1

删除$("#" + item).animate({ opacity: "0.4" }, 100).promise().done(并将此不透明度动画移到$.ajax调用之上后，脚本不再冻结。显然.done内的不透明度动画导致了问题。

jQuery脚本冻结了一半

1 个答案: