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

此致 AYUSH

Answer 1

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

因此，运行长期迭代setTimer，后台的可能性（浏览器最小化）可能会更加关闭，因为浏览器倾向于使最小化的选项卡/窗口降低执行优先级。

你应该做的是：减少间隔，比如说，大约10次，每次触发时，检查上次动作的实际经过时间。当时间在您想要的容差范围内时，请激活您的代码。测量绝对经过时间非常重要，因为总计触发的超时不精确，并且每次迭代时误差都会变大。

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

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

setTimeout几个小时后更快滑动

1 个答案: