js 定时器轮询 播放动画 时间一久 页面会很卡动画会混乱

[haohaovpal]

是这样的 一个按时更新数据的页面 setInterval 每个4s 会查询一次数据 更新数据 然后根据数据的变化和值 会通过js来控制DOM调用animation动画 例如图案扩大缩小 上下移动 以及小光点 沿着直线移动再消失 等等 一开始都没问题
但是页面一直开着1小时或者更久 就会很卡 动画也乱七八糟的--
不知道要怎么解决比较好

[haohaovpal]

引用 4 楼 讨厌走开啦 的回复:

[quote=引用 3 楼 haohaovpal 的回复:]
[quote=引用 2 楼 讨厌走开啦 的回复:]
setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。

有2个解决方案供参考：

1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）；

2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

----------------------

之前就是用websocket 但是后端接口有点不行
然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？

这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote]

你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。

按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote]

这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种

[讨厌走开啦]

引用 5 楼 haohaovpal 的回复:

[quote=引用 4 楼 讨厌走开啦 的回复:] [quote=引用 3 楼 haohaovpal 的回复:] [quote=引用 2 楼 讨厌走开啦 的回复:] setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。 有2个解决方案供参考： 1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）； 2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

---------------------- 之前就是用websocket 但是后端接口有点不行 然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？ 这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote] 你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。 按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote] 这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote] chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。

[haohaovpal]

引用 6 楼 讨厌走开啦 的回复:

[quote=引用 5 楼 haohaovpal 的回复:]
[quote=引用 4 楼 讨厌走开啦 的回复:]
[quote=引用 3 楼 haohaovpal 的回复:]
[quote=引用 2 楼 讨厌走开啦 的回复:]
setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。

有2个解决方案供参考：

1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）；

2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

----------------------

之前就是用websocket 但是后端接口有点不行
然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？

这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote]

你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。

按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote]

这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote]

chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote]

请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了

[讨厌走开啦]

引用 7 楼 haohaovpal 的回复:

[quote=引用 6 楼 讨厌走开啦 的回复:] [quote=引用 5 楼 haohaovpal 的回复:] [quote=引用 4 楼 讨厌走开啦 的回复:] [quote=引用 3 楼 haohaovpal 的回复:] [quote=引用 2 楼 讨厌走开啦 的回复:] setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。 有2个解决方案供参考： 1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）； 2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

---------------------- 之前就是用websocket 但是后端接口有点不行 然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？ 这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote] 你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。 按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote] 这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote] chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote] 请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote] 看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。

[haohaovpal]

引用 8 楼 讨厌走开啦 的回复:

[quote=引用 7 楼 haohaovpal 的回复:]
[quote=引用 6 楼 讨厌走开啦 的回复:]
[quote=引用 5 楼 haohaovpal 的回复:]
[quote=引用 4 楼 讨厌走开啦 的回复:]
[quote=引用 3 楼 haohaovpal 的回复:]
[quote=引用 2 楼 讨厌走开啦 的回复:]
setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。

有2个解决方案供参考：

1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）；

2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

----------------------

之前就是用websocket 但是后端接口有点不行
然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？

这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote]

你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。

按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote]

这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote]

chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote]

请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote]

看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。[/quote]

那个系统确实是单页面应用-- 对了大神 你说定时器的时间不是很准确 那animation 里的执行时间是准确的么

[天际的海浪]

这种情况除了定时器触发时间不准确之外。最常见的原因是在上一个定时器没有结束之前，又因为事件触发等情况再一次执行了创建新的定时器的代码。 这样就会出现两个或N多个相同的定时器同时计时，必然会造成混乱。 一般的解决方法是在创建新的定时器之前先取消上一个定时器。 clearInterval(timer); timer = setInterval(function(){..........}, 500);

[讨厌走开啦]

引用 9 楼 haohaovpal 的回复:

[quote=引用 8 楼 讨厌走开啦 的回复:] [quote=引用 7 楼 haohaovpal 的回复:] [quote=引用 6 楼 讨厌走开啦 的回复:] [quote=引用 5 楼 haohaovpal 的回复:] [quote=引用 4 楼 讨厌走开啦 的回复:] [quote=引用 3 楼 haohaovpal 的回复:] [quote=引用 2 楼 讨厌走开啦 的回复:] setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。 有2个解决方案供参考： 1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）； 2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

---------------------- 之前就是用websocket 但是后端接口有点不行 然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？ 这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote] 你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。 按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote] 这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote] chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote] 请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote] 看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。[/quote] 那个系统确实是单页面应用-- 对了大神 你说定时器的时间不是很准确 那animation 里的执行时间是准确的么 [/quote] css3的动画执行时间我没研究过受哪些因素影响，就像楼上大佬说的那样，你下一个4000毫秒的相应过来了就检查一下上次的动画是否完成，如果完成了，那按正常流程走，没完成，有2个办法：一个是干掉上一次的动画定时器继续创建本次的动画定时器，另外一个是跳过创建本次动画定时器，等下次再检查。

[haohaovpal]

引用 10 楼 天际的海浪 的回复:

这种情况除了定时器触发时间不准确之外。最常见的原因是在上一个定时器没有结束之前，又因为事件触发等情况再一次执行了创建新的定时器的代码。
这样就会出现两个或N多个相同的定时器同时计时，必然会造成混乱。

一般的解决方法是在创建新的定时器之前先取消上一个定时器。
clearInterval(timer);
timer = setInterval(function(){..........}, 500);

我这里总共就mounted的时候会创建定时器来轮询 会有什么情况会再触发一次创建定时器呢 mouted会多次触发吗

[haohaovpal]

引用 11 楼 讨厌走开啦 的回复:

[quote=引用 9 楼 haohaovpal 的回复:]
[quote=引用 8 楼 讨厌走开啦 的回复:]
[quote=引用 7 楼 haohaovpal 的回复:]
[quote=引用 6 楼 讨厌走开啦 的回复:]
[quote=引用 5 楼 haohaovpal 的回复:]
[quote=引用 4 楼 讨厌走开啦 的回复:]
[quote=引用 3 楼 haohaovpal 的回复:]
[quote=引用 2 楼 讨厌走开啦 的回复:]
setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。

有2个解决方案供参考：

1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）；

2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

----------------------

之前就是用websocket 但是后端接口有点不行
然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？

这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote]

你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。

按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote]

这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote]

chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote]

请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote]

看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。[/quote]

那个系统确实是单页面应用-- 对了大神 你说定时器的时间不是很准确 那animation 里的执行时间是准确的么 [/quote]

css3的动画执行时间我没研究过受哪些因素影响，就像楼上大佬说的那样，你下一个4000毫秒的相应过来了就检查一下上次的动画是否完成，如果完成了，那按正常流程走，没完成，有2个办法：一个是干掉上一次的动画定时器继续创建本次的动画定时器，另外一个是跳过创建本次动画定时器，等下次再检查。[/quote]

我现在就是针对每个动画执行函数 都会先进入 判断 dom.style.animation 是不是为空 为空就会执行后面的animation赋值
我这总共就一个 setInterval 4000一循环 其他的setTimeout都是用来让animation为‘’ 的 setTimeout会自动结束应该不需要清除吧 而setInterval是写在mounted钩子里的 就初始化的时候创建一次

[讨厌走开啦]

引用 13 楼 haohaovpal 的回复:

[quote=引用 11 楼 讨厌走开啦 的回复:] [quote=引用 9 楼 haohaovpal 的回复:] [quote=引用 8 楼 讨厌走开啦 的回复:] [quote=引用 7 楼 haohaovpal 的回复:] [quote=引用 6 楼 讨厌走开啦 的回复:] [quote=引用 5 楼 haohaovpal 的回复:] [quote=引用 4 楼 讨厌走开啦 的回复:] [quote=引用 3 楼 haohaovpal 的回复:] [quote=引用 2 楼 讨厌走开啦 的回复:] setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。 有2个解决方案供参考： 1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）； 2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

---------------------- 之前就是用websocket 但是后端接口有点不行 然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？ 这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote] 你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。 按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote] 这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote] chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote] 请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote] 看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。[/quote] 那个系统确实是单页面应用-- 对了大神 你说定时器的时间不是很准确 那animation 里的执行时间是准确的么 [/quote] css3的动画执行时间我没研究过受哪些因素影响，就像楼上大佬说的那样，你下一个4000毫秒的相应过来了就检查一下上次的动画是否完成，如果完成了，那按正常流程走，没完成，有2个办法：一个是干掉上一次的动画定时器继续创建本次的动画定时器，另外一个是跳过创建本次动画定时器，等下次再检查。[/quote] 我现在就是针对每个动画执行函数 都会先进入 判断 dom.style.animation 是不是为空 为空就会执行后面的animation赋值 我这总共就一个 setInterval 4000一循环 其他的setTimeout都是用来让animation为‘’ 的 setTimeout会自动结束应该不需要清除吧 而setInterval是写在mounted钩子里的 就初始化的时候创建一次[/quote] 哦 是不是这里没销毁定时器有内存泄漏。

[haohaovpal]

引用 14 楼 讨厌走开啦 的回复:

[quote=引用 13 楼 haohaovpal 的回复:]
[quote=引用 11 楼 讨厌走开啦 的回复:]
[quote=引用 9 楼 haohaovpal 的回复:]
[quote=引用 8 楼 讨厌走开啦 的回复:]
[quote=引用 7 楼 haohaovpal 的回复:]
[quote=引用 6 楼 讨厌走开啦 的回复:]
[quote=引用 5 楼 haohaovpal 的回复:]
[quote=引用 4 楼 讨厌走开啦 的回复:]
[quote=引用 3 楼 haohaovpal 的回复:]
[quote=引用 2 楼 讨厌走开啦 的回复:]
setInterval没有检查动画是否执行完成吧，下一个setInterval的结果过来的时候有可能setTimeout还没执行完或还没来得及执行，此时2个动画同时执行就是你看到的很乱的结果。因为前台的定时器不是准确的，浏览器不是正好在4000毫秒的时候执行下一次轮询，有可能有别的事务会阻塞一小会（比如用户在3999毫秒的时候点了一下页面的下载按钮，浏览器会等下载对应的js执行完成后再发起轮询），时间长了就会发生前面2个定时器冲突的情况。

有2个解决方案供参考：

1.每次setInterval轮询的时候检查当前dom.style.animation是否已经清空（表示动画完成），没完成则不进行本次动画（代价是少一次动画效果）；

2.不用轮询改为websocket，让后台每4000毫秒推送一次结果，由后台来保证轮询时间间隔的可靠性。

----------------------

之前就是用websocket 但是后端接口有点不行
然后我的动画最多是3s的 所以是4s一次轮询 这样也会有冲突吗？

这个是页面开很久了会产生这样动画混乱 一卡一卡的一个匀速运动全部变成闪现了--[/quote]

你可以打日志看嘛，看看每次setInterval轮询的时候当前dom.style.animation是否已经清空，最好把时间戳也打出来。

按你现在的描述，你会发现setInterval轮询和上一次动画结束的时间在一点一点变短，最后变成0的时候就表示动画开始发生冲突了。[/quote]

这个页面耗费内存无关吗？？后面的动画是能触发的 就是都变得超级卡的那种[/quote]

chrome有内存监控的插件，你可以看下内存使用情况，上面的代码看不出会导致内存泄漏。[/quote]

请问下 如果我切换到其他窗口 这时候会对那个页面的定时器有什么影响呢 因为每次切换的时候 切回来就会怪异了[/quote]

看你是怎么切换的，如果是切换后页面会重新reload，应该是不会有影响的，如果是类似单页应用的路由切换，则需要在页面切换的时候销毁定时器，在重新切换回来的时候再创建新的定时器，否则每切换回来一次就会多一个定时器。[/quote]

那个系统确实是单页面应用-- 对了大神 你说定时器的时间不是很准确 那animation 里的执行时间是准确的么 [/quote]

css3的动画执行时间我没研究过受哪些因素影响，就像楼上大佬说的那样，你下一个4000毫秒的相应过来了就检查一下上次的动画是否完成，如果完成了，那按正常流程走，没完成，有2个办法：一个是干掉上一次的动画定时器继续创建本次的动画定时器，另外一个是跳过创建本次动画定时器，等下次再检查。[/quote]

我现在就是针对每个动画执行函数 都会先进入 判断 dom.style.animation 是不是为空 为空就会执行后面的animation赋值
我这总共就一个 setInterval 4000一循环 其他的setTimeout都是用来让animation为‘’ 的 setTimeout会自动结束应该不需要清除吧 而setInterval是写在mounted钩子里的 就初始化的时候创建一次[/quote]

哦 是不是这里没销毁定时器有内存泄漏。[/quote]


我现在 在setInterval 前面先clearInterval一次 好像改善好多了。

[A.cm]

没有加锁，下一次定时器开始是需要把之前的关掉

[meihuting]

本人也出现这种情况，楼主不知道解决没有，可否分享下~~

[luzhichen_zhang]

收藏备用了！

[尹为者]

通过回调会好点

[ss258b]

通过回调还是不能完美解决~

[haohaovpal]

引用 20 楼 ss258b 的回复:

通过回调还是不能完美解决~

我就是每次调用动画前要先判断 animation是否为空 为空才会进行下去 我现在基本解决了 应该就是这个问题

[qq_40103781]

是这样的 一个按时更新数据的页面

[大时代的步伐者]

能请教各位大佬，电脑游戏秒数是零的时候还能操作几秒要修改哪里才行

[BDS_Biu]

setlnterval定时器不是很精确的