Question

我希望我的代码使用moment.js获取特定时间，将其与“帧”数相关联，然后使用它来填充网址以获取序列中的指定图像。然后，该URL将以500ms的速率遍历一系列图像URL（它们是小图像，如20k）。我使用名为getframe的setInterval函数执行此操作。

但是为了确保我的帧迭代器不会因延迟而落后，我还想运行另一个名为gettime的setinterval，它根据一个新的moment.js时间戳更新帧变量。我每运行10000毫秒。问题是我的代码不能与这两个同时运行的setIntervals一起使用。如果我从一个setinterval中取出函数gettime它可以正常工作但是当我把它放回到它停止时我无法弄清楚为什么？

打开有关如何更有效地进行此gettime更新的建议但我在jquery技能方面非常有限（对不起）所以你必须非常详细地解释为什么/如何工作..

<!DOCTYPE html>
<html>
  <head>
    <script src="three/js/moment.js"> </script>
    <script src="three/js/jquery-2.0.3.js"></script>
  <style>
  .frames { position:relative; width:500px; height:332px; }
  .frames img { position:absolute; left:0; top:0; }
  </style>
  <head>

  <body>

<img id ="frame_placeholder">

<script>





  window.onload = $(function (){

    setInterval(gettime,10000);

    setInterval(getframe,500); 

    function gettime(){
      now = moment().zone('-0500')

      if (now.hour() >= 18) {
      now = now.subtract('hour', 18).subtract('minute', 30)
      } else {
      now = now.add('hour', 6).add('minute', 30)
        };

    var frame = ((now.hour() * 3600) + (now.minute() * 60) + now.second()) * 2;


    };


    function getframe(){
      var framestr=frame.toString();
                            function pad (str, max) 
                            {
                              return str.length < max ? pad("0" + str, max) : str;
                            }; 

      framerun = pad (framestr,5);

      var src = "https://s3.amazonaws.com/image"+ framerun +".jpg"

      framerun1=parseInt(framerun)
      $("#frame_placeholder").attr("src", src);
      frame=framerun1+=1;

    }

  });






</script>

  </body>
  </html>

Answer 1

的 jsFiddle Demo 的

你的变量范围应归咎于此。 frame本地范围限定为gettime，因此在getframe框架中使用时未定义且存在错误。这可以通过将frame变量放在onload函数内部但在gettime之外，通过从var移除gettime for frame，并在getframe中放置未定义的检查来解决。 / p>
setInterval(gettime,10000); setInterval(getframe,500); var frame; function gettime(){ now = moment().zone('-0500'); if (now.hour() >= 18) { now = now.subtract('hour', 18).subtract('minute', 30); } else { now = now.add('hour', 6).add('minute', 30); } frame = ((now.hour() * 3600) + (now.minute() * 60) + now.second()) * 2; } function getframe(){ var framestr = frame? frame.toString() : ""; function pad (str, max){ return str.length < max ? pad("0" + str, max) : str; } framerun = pad (framestr,5); var src = "https://s3.amazonaws.com/image"+ framerun +".jpg"; framerun1=parseInt(framerun); $("#frame_placeholder").attr("src", src); frame=framerun1+=1; }

Answer 2

这并不能真正回答您的直接问题，但如果您尝试动画内容每半秒更改一次，则可能需要使用Javascript Image对象预加载图像：

var frames = [];
var loadCount = 0;
function preloadImages() {
  for (var i = 0; i < TOTAL_FRAMES; i++) {
    loadFrame("myurl" + i + ".jpg", i);
  }
}

function loadFrame(url, frameNumber) {
  var img = new Image();
  img.src = url;
  img.onload(function() {
    frames[frameNumber] = img;
    loadCount++;
    if (loadCount == TOTAL_FRAMES) {
      startAnimation();
    }
  });
}

基本上，这会循环遍历所有图像URL，下载它们并将它们存储在一个数组中，然后在每个URL之后运行一个回调。如果已下载所有图像，则动画开始，您不必担心从服务器加载图像。此外，您的帧以数组形式组织，您可以在运行动画时循环遍历它们。

我的代码不适用于两个setintervals

2 个答案: