javascript - setTimeout 几个小时后滑动速度更快

Question

我正在使用以下代码在 90 秒后滑动一组 DIV。最初，滑动效果很好，但几个小时后，滑动统计数据发生得更加随机。

 function loadTemplateDisplayInterval()
 {
    var timeload=90000;//slide will change after 1.5 mints  
    var count = <s:property value="#request.templates.size()" />;
    var timeOut=setTimeout(function() {
    var prev=display_div;
    display_div++;

    if($("#container_" + prev).is(":visible"))
    {   

        $("#container_" + prev).hide(100).removeClass("fadeInLeftBig").addClass("fadeOutRightBig");
        $("#container_"+display_div).show(100).removeClass("fadeOutRightBig").addClass("fadeInLeftBig");

    }

    if(display_div>count)
    {   

        display_div=1;
        prev=count;

        $("#container_" + prev).hide(100).removeClass("fadeInLeftBig").addClass("fadeOutRightBig");
        $("#container_"+display_div).show(100).removeClass("fadeOutRightBig").addClass("fadeInLeftBig");

        setTimeout(function() {
            loadTemplateDisplayInterval();
        },timeload);

     }
     else
     {
        loadTemplateDisplayInterval();
     }

    clearTimeout(timeOut);
}, timeload);
}

Div 的结构为，

    <div class="container-fluid animated" id="container_1"
            style="opacity: 0.01">
            <div class="row">
                row 1
            </div>
   </div>
   <div class="container-fluid animated" id="container_2"
            style="opacity: 0.01">
            <div class="row">
                row 1
            </div>
   </div>
   <div class="container-fluid animated" id="container_3"
            style="opacity: 0.01">
            <div class="row">
                row 1
            </div>
   </div>

我无法思考，这可能会发生。我们唯一注意到的是，当我们没有 d3.js 组件时，这个问题就不会发生。

编辑:使用 d3.js 代码更新

    var font_size = new Array();
    var all_topics = new Array();

    $('#' + divid).css('height', graph_h + "px").css("width", row_6 + "px");

    $.post('<s:url value="/advance/topicsWarroomElement" />', {
        setting_id : setting_id
    }, function(data) {

    var vals = eval('(' + data + ')');
            if (vals.length > 15) {

                //var temp = vals.length - 12;
                vals = vals.slice(0,12);
            }

            for ( var i = 0; i < vals.length; i++) {
                var x = vals[i];
                var temp_font = getFont(x.weight, i);
                all_topics.push({
                    "Text" : x.text,
                    "Size" : temp_font,
                });

                font_size.push(temp_font);
            }

//console.log(all_topics);
var fill = d3.scale.category20();

        d3.layout.cloud().size([ row_6, graph_h ]).words(
                all_topics.map(function(d) {
                    return {
                        text : d.Text,
                        size : d.Size
                    };
                    console.log(d.Text);
                }))

        .padding(function(d) {
            if (d.size <= 25 && vals.length <= 5) {

                return 10;
            } else {

                return 5;
            }
        }).rotate(function() {
            return 0;
        }).fontSize(function(d) {
            return d.size;
        }).on("end", draw).start();

        function draw(words) {
        console.log(words);
            var element = document.getElementById(divid);
            d3.select(element).append("svg").attr("width", row_6).attr(
                    "height", graph_h).append("g").attr(
                    "transform",
                    function(d) {
                        return "translate(" + [ row_6 / 2, graph_h / 2 ]
                                + ")";
                    }).selectAll("text").data(words).enter().append("text")
                    .style("font-size", function(d, i) {
                        return font_size[i] + "px";

                    }).style("font-family", " Helvetica,Arial,sans-serif")
                    .style("fill", function(d, i) {
                        return fill(i);
                    }).attr("text-anchor", "middle").attr(
                            "transform",
                            function(d) {
                                return "translate(" + [ d.x, d.y ]
                                        + ")rotate(" + d.rotate + ")";
                            }).text(function(d) {
                        return d.text;
                    });
        }

        if (draw !== true) {

            progressbar(divid);
        }

        setTimeout(function() {
            getTopics(setting_id, graph_type, divid, true);

        }, 2 * interval * 60 * 1000);

    });

    font_size = [];
    all_topics = [];

编辑2在提出建议之后，很明显 setTimeout 或 setInterval 一段时间后就会变得疯狂。我添加了时间间隔检查，我的新方法如下所示。但即便如此，我还是发现时间本身并不正确，并且这种差异在很多时候都是错误的，无论如何都要解决这个问题。

function loadTemplateDisplayInterval()
{
    console.log('call load template display ');
    var timeload=30000;//slide will change after 1.5 mints  
    var count = <s:property value="#request.templates.size()" />;
    var lastTrigger = new Date().getTime();

    var timeOut=setInterval(function() 
    {
        console.log('difference -->'+ (new Date().getTime() - lastTrigger));
        if((new Date().getTime() - lastTrigger)>=timeload)
        {
            lastTrigger= new Date().getTime();
            console.log('Entering timeout '+display_div);
            var prev=display_div;
            display_div++;

            if($("#container_" + prev).is(":visible"))
            {   
                $("#container_" + prev).hide(100).removeClass("fadeInLeftBig").addClass("fadeOutRightBig");
                $("#container_"+display_div).show(100).removeClass("fadeOutRightBig").addClass("fadeInLeftBig");
            }

            if(display_div>count)
            {   
                display_div=1;
                prev=count;

                $("#container_" + prev).hide(100).removeClass("fadeInLeftBig").addClass("fadeOutRightBig");
                $("#container_"+display_div).show(100).removeClass("fadeOutRightBig").addClass("fadeInLeftBig");
                console.log('call load template display if block');
                //loadTemplateDisplayInterval();
            }

        }
    }, 10000);
}

上述通话的时间记录此时间日志显示，即使连续两次调用的日期差异也是不正确的。这怎么可能是正确的。

difference -->30058
Entering timeout 2
difference -->30053
Entering timeout 1
difference -->30052
Entering timeout 2
difference -->30058
Entering timeout 1
difference -->9999
difference -->9978

问候，阿尤什

Answer 1

遗憾的是

setInterval 并不精确。我曾经使用 setTimeout(1000) 创建了一个时钟，结果是一场灾难 - 触发时间波动很大，甚至高达 +-30%。

因此，运行长期迭代setTimer，在后台(浏览器最小化)的可能性可能会更多，因为浏览器倾向于为最小化的选项卡/窗口提供较低的执行优先级。

您应该做的是:将间隔减少大约 10 倍，并且每次触发时，检查自上次操作以来实际耗时。当时间在您期望的容差范围内时，触发您的代码。测量绝对运行时间非常重要，因为总结触发的超时不精确，并且每次迭代误差都会变大。

编辑:要获取自纪元以来的当前时间(以毫秒为单位)，请使用new Date().getTime()。您可以在每次触发操作时保存该值，并检查中间间隔的耗时。只需减去这些值，当接近您的间隔时间时，再次触发您的操作。

编辑 2:测量间隔时间的示例:http://jsbin.com/jerizemala/1/edit?html,js,console