javascript - 如何解决从React中循环浏览图像的速度变慢的问题？(How to work around a slowdown from looping through images in React?)

Question

I'm currently looping through a list of images with the purpose of animating the movement of a light on a bar.

(我目前正在遍历图像列表，以使灯光在酒吧上的运动动画化。)

Unfortunately I am not using CSS because it seems to me for my setup this looping would probably be the best way but it seems to eat a lot of resources so I am wondering if there is a way around this or if I simply have to change everything.

(不幸的是，我没有使用CSS，因为在我的设置中，似乎这种循环可能是最好的方法，但是它似乎占用了很多资源，因此我想知道是否有解决方法，还是我只需要更改所有内容。)

Below is the code I am using:

(以下是我正在使用的代码：)

Help on the code came from here:

(代码帮助来自此处：)

How to loop over images array and render them in a component for React?

(如何遍历图像数组并在React组件中渲染它们？)

Code

(码)

    state = {
    bars:[bar1,bar2,bar3,bar4,bar5],
    activeImageIndex: 0
 };

 componentDidMount(){
   setInterval(()=>{
     let newActiveIndex = this.state.activeImageIndex===4 ? 0 : this.state.activeImageIndex+1     
     this.setState({
        activeImageIndex: newActiveIndex
     })
   }, 1000);


 }

 <Image src={this.state.bars[activeImageIndex]} />

The code functions well for a bit then the app slows down as more resources seem to be taken.

(代码运行良好，然后由于似乎占用了更多资源而使应用速度变慢。)

Checking the network tool I can see resources growing (files are named differently in my app):

(检查网络工具，我可以看到资源在增长（我的应用程序中文件的名称不同）：)

Is there a better way to approach this?

(有没有更好的方法来解决这个问题？)

Or perhaps a way to free resources after each call?

(还是在每次通话后释放资源的方法？)

  ask by LoF10 translate from so

Answer 1

I am the guy who gave the react answer :)

(我是给出回答的人:))

Everything with a setInterval overtime will slow down, especially if you modify dom every 1second using javascript, especially when they are images .

(带有setInterval加班的一切都会减慢速度，尤其是如果您每隔1秒使用javascript修改dom 时 ， 尤其是当它们为images时 。)

Every time the setInterval is called the browser need's to repaint the container with the next image, this paint can cost a lot of ms, but if it costs more than 16ms(60fps), frame is dropped and your application will start to become laggy.

(每次调用setInterval时，浏览器都需要用下一张图像重新绘制容器，此绘制可能会花费很多ms，但是如果花费超过16ms（60fps），则会丢失帧，并且您的应用程序将开始变得笨拙。)

That's why the animation king is: CSS

(这就是动画之王的原因： CSS)

 .lightbox { border: solid 3px black; display: inline-flex; padding: 10px 20px; justify-content: space-between; width: 200px; position: relative; margin-left: 24px; align-items: center; } .light { border: solid 3px black; border-radius: 50%; height: 15px; width: 15px; animation: blink 5s linear infinite; } .light:nth-child(2) { animation-delay: 1s } .light:nth-child(3) { animation-delay: 2s } .light:nth-child(4) { animation-delay: 3s } .light:nth-child(5) { animation-delay: 4s } @keyframes blink { 0% { background-color: orangered; } 19% { background-color: orangered; } 20% { background-color: transparent; } 100% { background-color: transparent; } } .lightbox::before, .lightbox::after { content: ""; border: solid 1.5px black; width: 20px; height: 0; position: absolute; } .li 

 <div class="lightbox"> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> </div> 

This snippet over time it won't lag and most importantly it won't block the thread .

(随着时间的流逝，此片段不会滞后，最重要的是，它不会阻塞线程 。)