Question

我有代码刷新在本地服务器上运行的div而不会闪烁，但是当它在网络服务器上托管时，它在刷新时会闪烁（消失到后台）：

 <script>
    setTimeout(function() {
        $.ajax({      
            url: "",
            context: document.body,
            success: function(s,x){
                $(this).html(s);
            }
        });
    }, 1000);
</script>

我已经很好地了解了SO和网络，似乎我想要对div表进行双重缓冲我很清爽 - 有一个隐藏，刷新，然后交换两个div的显示样式

我从How to avoid blinking when updating page from ajax

开始

转到http://www.brightcherry.co.uk/scribbles/jquery-auto-refresh-div-every-x-seconds/ 和Trouble with dynamic refreshing div

从How to toggle between two divs

获得了一些好主意

我试图开始工作的代码可能太复杂了。我觉得它应该可以工作，桌子会刷新，但是它们会在显示之间长时间闪烁。

的div;

<div id="id1" style="display: none";>
    <div id="allTable1" class = "tableCenter">
        <div id="hiTable" class = "table">
            {% for entry in high_entry_list %}
            <li>
                <a href="/entries/{{ entry.id }}/"> 
                    <div class = "high" style = "text-align: left";>
                        {{ entry.text }}&nbsp;&nbsp;&nbsp;&nbsp;
                        <div style="float: right">
                            {{ entry.score }}
                        </div>
                    </div>
                </a>
            </li>
            {% endfor %}
        </div>
        ....and two more tables as hiTable above...
    </div>
</div>

<div id="id2" style="display: block";>
    <div id="allTable2" class = "tableCenter">
        <div id="hiTable" class = "table">
            {% for entry in high_entry_list %}
            <li>
                <a href="/entries/{{ entry.id }}/"> 
                    <div class = "high" style = "text-align: left";>
                        {{ entry.text }}&nbsp;&nbsp;&nbsp;&nbsp;
                        <div style="float: right">
                            {{ entry.score }}
                        </div>
                    </div>
                </a>
            </li>
            {% endfor %}
        </div>
        ....and two more tables as hiTable above...
    </div>
</div>

脚本：

<script>
    var visible_id = 'id2';
    setInterval(function() {
        if(visible_id == 'id2') {               
            document.getElementById('id1').style.display = 'block';             
            document.getElementById('id2').style.display = 'none';
            $.ajax({
                url: "/index",
                context: document.getElementById('allTable2'),
                success: function (s) {
                    $("#allTable2").html(s).load;
                }
            });
            visible_id = 'id1';
        } else {
            document.getElementById('id1').style.display = 'none';            
            document.getElementById('id2').style.display = 'block';
            $.ajax({
                url: "/index",
                context: document.getElementById('allTable1'),
                success: function (s) {
                    $("#allTable1").html(s).load;
                }
            });
            visible_id = 'id2';
        }
    }, 1000);
</script>

所以我有三个表的两个副本的div包装器（一个隐藏，一个显示），javascript检查可见性，交换两个包装器的显示样式，并用ajax刷新更新隐藏的一个（可以工作）。是否有明显的逻辑或编码缺陷可能导致闪烁？

Answer 1

AJAX请求可能需要比一秒钟更长的时间。无论特定的AJAX请求是否已完成，您都在表之间切换，但AJAX仍将执行（可能是1.5秒之后），从而为您提供不希望的闪烁行为。

不是设置将执行AJAX请求是否已完成的间隔，而是从AJAX回调中设置超时。喜欢这个（你可能需要把它搞砸一些）：

<script>

(function(){
  var visible_id = 'id2';

  function toggleDisplay(){
    // toggle displayed table
    document.getElementById('id1').style.display = visible_id === 'id2' ? 'block' : 'none';
    document.getElementById('id2').style.display = visible_id === 'id2' ? 'none' : 'block';
    var tableId = visible_id === 'id2' ? 'allTable1' : 'allTable2';
    $.ajax({
        url: "/index",
        context: document.getElementById(tableId),
        success: function (s) {
          $("#" + tableId).html(s).load;
          // when the ajax request has finished, initiate the next ajax request
          // after a 1 second delay
          window.setTimeout( toggleDisplay, 1000 );
        }
    });
    visible_id = visible_id === 'id2' ? 'id1' : 'id2';
  }

})();

</script>

在Ajax中刷新时，双缓冲div闪烁

1 个答案: