替代使用较少资源的setInterval

时间:2018-05-31 11:37:52

标签: javascript reactjs setinterval

我有一个组件每4秒更换一次图像,如下所示:

state = {
  images: this.props.items,
  imageIndex: 0,
}
componentDidMount() {
  this.interval = setInterval(() => this.changeImage(), 4000)
}
changeImage = () => {
  const { imageIndex, images } = this.state
  if (imageIndex === images.length - 1) {
    this.setState({ imageIndex: 0 })
  } else {
    this.setState({ imageIndex: imageIndex + 1 })
  }
}
render() {
  const { images, imageIndex } = this.state
  return <img src={images[imageIndex]} />
}

该组件用于页面上的6个点。

问题是几分钟后,风扇继续运转,电脑变热了。我不知道这是由于CPU使用量增加还是内存泄漏造成的。

setInterval是否有替代方法(以预定义的间隔执行重复任务),同时使用较少的计算机资源?

2 个答案:

答案 0 :(得分:4)

为此目的使用setInterval没有任何内在错误。但是你应该确保在卸载组件时清除间隔!为此目的,有一个名为clearInterval的函数。这很可能是您性能问题的根源。

所以我建议这样的事情:

componentWillUnmount() {
  clearInterval(this.interval);
}

答案 1 :(得分:0)

尝试setTimeout

function myFn() {
  setTimeout(myFn, 4000);
}
myFn();