javascript - Ajax刷新时双缓冲div闪烁

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>