如何每 500 - 1000 毫秒刷新一次 div 标签？

Question

我有这个 div ，其内容取决于 HTML 嵌入式媒体播放器的当前时间。

<div id = "myId">
<s:iterator value="timeLine.getFrameByTime('22').slide.indices">
    <a href="javascript:setCurrentTime('<s:property value="timeLine.getFrameByTime('22').slide.firstOccurence"/>')">
             <s:property value="text"/>
       </a>
</s:iterator>
</div>

数字 22 是硬编码的。应该是下面函数的返回值。

JavaScript 代码：

function getCurrentTime() {
    return document.getElementById('video').controls.currentPositionString;
}

function setCurrentTime(time) { 
    document.getElementById('video').controls.currentPosition = parseFloat(time);
}

上面的 div 应每 500 毫秒刷新一次。我不认为 AJAX 和 JSON 是解决方案，因为那样服务器会超载。

有没有办法从 JavaScript (jQuery) while 循环刷新睡眠 500 - 1000 毫秒的 div ？

编辑：我所说的刷新是指，该 div 的内容应该更改。我知道我的媒体播放器的当前时间，并且我知道特定时间输入的内容是什么。现在我需要一种机制来询问我的媒体播放器的时间并更改 div 内容。

问题是：每 500 毫秒使用 AJAX 并在服务器上调用我的方法，该方法为我提供特定时间输入的内容，或者在页面初始化上加载整个数据并在 JavaScript 中实现逻辑，该逻辑仅根据当前时间显示该数据的一部分？

Answer 1

您可以使用 Jquery SetInterval 函数来实现此目的...

setInterval(function() {
      // Do something every 5 seconds
}, 5000);

这可用于使用客户端缓存中的内容刷新 div 或发送服务器请求以检索数据以刷新 div。

Answer 2

您必须使用

吗？如果您可以改用 ，则解决方案会更简单并且可以使用 HTML 功能。这个 stackoverflow 答案 描述了如何使用 < ;meta> 标签每 X 秒自动刷新一次。

Answer 3

如果可能的话，我建议你将时间线数据的所有内容输出到javascript。

var timeLineIndices = [ 'value1', 'value2', 'value3' ];
var getFrameSlideIndicesByTime = function(time){
    return timeLineIndices[time];
}

通过 javascript 在客户端有效实现 timeLine.getFrameByTime('22').slide.indices 。

如果输出所有帧数​​据太大，请考虑仅根据 500 - 1000ms 间隔输出帧。