我的 setInterval 函数减慢了我的代码速度——我怎样才能修改它以获得更好的性能？
Posted
技术标签:
【中文标题】我的 setInterval 函数减慢了我的代码速度——我怎样才能修改它以获得更好的性能？【英文标题】：my setInterval functions are slowing down my code-how can I rework it for better performance? 【发布时间】：2013-12-09 02:42:06 【问题描述】：我编写了一些代码，使用 moment.js 和一些 jquery 在正确的时间从一个大文件夹中选择正确的 jpeg，然后遍历它们。
我使用 setInterval 来获得正确的速度（图像之间 500 毫秒）并且它一直以该速度工作，直到我意识到我需要考虑 jpg 文件名中的一些前导零（它们是用六位数生成的，例如 000001.jpg最多 100000.jpg），所以我添加了一个功能板（），我发现它可以纠正这个问题。
问题是我注意到每 500 毫秒运行一次 pad 功能确实会减慢速度。我没有理由需要更频繁地运行 pad 功能——例如以我加载 jpeg 的速度（ 500ms），我只需要在前 5000ms（在 000001.jpg 然后在 000010.jpg）使用 pad 函数两次，然后必要的频率呈指数下降（例如，在 000100.jpg 之前不需要再做任何事情，即 ~ 45000 毫秒后，等等……）
但由于 pad 函数操作的是在 500 毫秒 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>
【问题讨论】：
不需要每个区间都定义pad函数，先把函数声明移出 真的。我试过了，但是当我把它移出时，我的代码停止工作，我很困惑为什么。我认为向您展示它在工作时的所有外观更有意义，但我可以对其进行编辑以向您展示我如何尝试将 pad 功能移动到较慢的 setinterval？那会更有帮助吗？ 更好的填充方式：framerun = ("0000000000" + frame).substring(-6)
无论如何，代码的编写方式本身并没有什么“慢”（并且 pad 函数的位置无关紧要）——即使提供的 pad 也会运行在 O(n) 时间。现在，可能存在与设置 src 的退化 DOM 交互？
您也可以考虑将图像预加载到数组中……然后循环遍历已加载图像的数组
【参考方案1】：
你不需要在每次间隔运行时重新定义 pad 函数， 在窗口范围内定义它，并且只在间隔回调中使用它。
jQuery匹配也是如此，将元素匹配一次并存储在变量中。
var $frameholder = jQuery('#frame_placeholder');
属性定义中等号周围的空格也是无效的。
id = "frame_placeholder"
应该是
id="frame_placeholder"
编辑： 还要确保始终使用带有 radix 参数的 parseInt 以避免由于错误的猜测数字系统而导致转换错误。
parseInt(framerun, 10);
【讨论】：
pad函数的位置在很大程度上与执行速度无关。也许应该提到它，但不要提到它听起来像问题的地步。同样，缓存元素几乎是无关紧要的，因为它运行的频率很低——计时器每秒最多运行两次。 这是真的，它可能不是性能问题，但它仍然不是“无关紧要的”，因为它的代码风格更好，我现在正在设置一个小提琴来进一步调查。 与问题无关。这是次要主题。 有趣的是，它可能不是滞后的原因。当我开始注意到问题时，我很确定这是我在版本之间更改的所有内容，但我将回到“更快”的版本并仔细检查...... 我已经创建了您的原始代码并对其进行了分析，但在 Chrome 中看不到任何性能问题。也许您只需要重新启动浏览器，我想值得一试吗？还只是问，如果您每 500 毫秒更改一次图像，您的用户应该如何快速加载它？如果你想做动画，你会更好地预加载帧并将它们绘制到画布或使用 gif。 jsfiddle.net/GunGu以上是关于我的 setInterval 函数减慢了我的代码速度——我怎样才能修改它以获得更好的性能？的主要内容，如果未能解决你的问题，请参考以下文章
Java Hashtable put 方法减慢了我的应用程序
为啥 TensorFlow 的 `tf.data` 包会减慢我的代码速度？
如何启动通过setInterval方法与buttonClick一起使用的函数