Question

我编写了一些使用moment.js和一些jquery的代码，以便在正确的时间从一个大文件夹中选择正确的jpeg，然后遍历它们。

我使用setInterval来获得正确的速度（图像之间500毫秒）并且它始终以该速度工作，直到我意识到我需要在jpg文件名中考虑一些前导零（它们是用六位数生成的，例如000001.jpg高达100000.jpg）所以我添加了一个功能键盘（），我发现它是为了纠正它。

问题是我注意到每隔500毫秒运行的打击垫功能实际上减慢了速度。我没有理由需要更频繁地运行打击垫功能 - 例如以我加载jpegs的速度（ 500ms），我只需要在前5000ms（在000001.jpg然后在000010.jpg）两次填充功能，然后必要的频率指数下降（例如，没有什么需要再做，直到000100.jpg这是〜 45000ms以后等等......）

但是由于pad函数操作在500ms setInterval事件中调用的变量，我无法弄清楚如何将该部分分开以提高性能。有任何想法吗？

这是我的滞后代码：

<!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>

      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;




     window.onload = $(function (){
      setInterval(function() {
          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;

       },500);  
      });






    </script>

  </body>
</html>

Answer 1

每次间隔运行都不需要重新定义打击垫功能，在窗口范围内定义它，并仅在间隔回调中使用它。

jQuery匹配也是如此，匹配元素一次并将其存储在变量中。

var $frameholder = jQuery('#frame_placeholder');

等号登录属性定义周围的空格也是无效的。

id = "frame_placeholder"

应该是

id="frame_placeholder"

编辑：另外一定要始终使用parseInt和radix参数，以避免因错误的猜测数字系统而导致转换错误。

parseInt(framerun, 10);

我的setInterval函数正在减慢我的代码 - 我如何重做它以获得更好的性能？

1 个答案: