Javascript 如何避免设置间隔过慢？

我有一个语音URL，我从数据库中获取，想用react native sound播放

因此，我制作了一个可重用组件，用于渲染播放图标和持续时间“现在没有动画”

因此，在声音播放之后，我首先更改播放图标，然后运行

setInterval

以增加每秒计数+1

但一开始更改图标和以秒为单位的实际持续时间太慢：11但计时器在9秒后停止

那么我怎样才能让它更快

代码

这就是呈现UI的方式

  _renderPlayButton = onPress => {
    const {timer} = this.state;
    let icon = this.state.playingNow ? 'pause' : 'play-arrow';
    // const spin = this.state.spinValue.interpolate({
    //   inputRange: [0, 1],
    //   outputRange: [0, -120],
    // });
    return (
      <View
        style={{
          opacity: this.props.opacity,
          alignItems: 'center',
          flexDirection: 'row',
        }}>
        <TouchableOpacity
          style={{backgroundColor: '#1E558E', borderRadius: 100}}
          onPress={onPress}>
          <Icon name={icon} color="#fff" size={25} style={{padding: 2}} />
        </TouchableOpacity>
        <View
          style={{flexDirection: 'row', marginLeft: 5, alignItems: 'center'}}>
          {/* <Animated.View
            style={{
              backgroundColor: '#f00',
              borderRadius: 10,
              width: 15,
              height: 15,
              zIndex: 10,
              transform: [{translateX: spin}],
            }}
          /> */}
          <View
            style={{
              width: 120,
              backgroundColor: '#a7a7a7',
              height: 2,
            }}
          />
          <Text style={{color: '#777', marginBottom: 5, marginLeft: 10}}>
            00:
            {('0' + (timer || 0)).slice(-2)}
            {console.log('timer-state:', timer)}
          </Text>
        </View>
      </View>
    );
  };

\u renderPlayButton=onPress=>{
const{timer}=this.state；
让icon=this.state.playingNow？'pause'：'play arrow'；
//const spin=this.state.spinValue.interpolate({
//输入范围：[0，1]，
//输出范围：[0，-120]，
// });
返回(
{/*  */}
00:
{（'0'+（计时器| | 0））.slice（-2）}
{console.log（'timer-state:'，timer）}
);
};

JSX

{这个。_renderPlayButton（（）=>{
这个。play（）；
})}

在处理实时问题时，永远不要自己计算，只要有可用的真实数据，就始终使用

使用

声音

，它看起来像

getCurrentTime

。首先，它将显示为

0

seconds，这就是为什么您首先使用间隔

// Set it playing as soon as possible.
this.setState({ playingNow: true });

this.interval = setInterval(
  () =>
    sound.getCurrentTime(seconds => {
      this.setState({ timer: Math.floor(seconds) });
    }),
  500 // reduce the delay so it don't skip a second.
);

---

---

请注意，我没有测试这个答案中的代码。另外，对

组件执行正确的清理将卸载

，这一点很重要，比如在声音对象上调用

.release（）

。

不知道这是否是问题的原因，但不应直接在传递给

setState

的对象中使用

this.state

。改为使用。@RobinZigmond你的意思是

setState

timer？是的。将其更改为

this.setState（oldState=>（{playingNow:true，timer:oldState.timer+1}））

。我不能肯定这会解决这个问题（如果我确信我会给出答案的话），但在我看来，这肯定是可能的。我链接到的文章应该解释为什么这是必要的。@RobinZigmond遗憾地没有解决这个问题：\@RobinZigmond当我用这种方式在

\u renderPlayButton（）

中记录

计时器时，它记录了125次，尽管声音只有3秒：什么是
release（）
do，为什么在
组件上调用它会卸载
@DevAS根据文档，它会释放音频的内存。不过，我从来没有做过React Native开发，也没有使用过这个API，所以我不能确定在哪里调用它最好。@Emilebergron谢谢你的回答，但我得到了2.072这样的十进制秒数，它不会很好工作，什么时候使用Math.floor（秒）跳过了一些numbers@OliverD我更新了答案，所以不太可能跳过第二次更新。@EmileBergeron嗨，希望你很好。我有一个简单的问题，是否可以使用setInterval并每隔5秒继续调用我的aPI get请求，或者这会导致性能问题？
      <View>
        {this._renderPlayButton(() => {
          this.play();
        })}
      </View>

// Set it playing as soon as possible.
this.setState({ playingNow: true });

this.interval = setInterval(
  () =>
    sound.getCurrentTime(seconds => {
      this.setState({ timer: Math.floor(seconds) });
    }),
  500 // reduce the delay so it don't skip a second.
);