React JS 滑块滞后

Question

我们使用滑块按时间过滤。目前，当我们将它加载到 phone 并使用它时，会出现很多延迟，并且当您滑动滑块时，它似乎在时间的物理显示上。下面是我们的代码，为什么会发生这种情况？我们是否需要更新我们计算价值的方式（我们尝试将其作为股票价值，设置状态并仍然看到滞后，所以我们不相信它是那样）。目前我们正在尝试在此滑块上显示 24 小时。

谢谢！

注意：我们正在审查代码，甚至删除了函数调用中多余的 this.setState({value: this.limitMarkers(value)} 以及函数本身。这没有帮助 :(。如果有人有任何想法，请告诉我们！

 <Slider
   minimumTrackTintColor={'#FFCD00'}
   maximumTrackTintColor={'#e0e0e0'}
   thumbStyle={{color: '#FFCD00', backgroundColor: '#FFCD00'}}
   value={this.state.sliderValue}
   maximumValue={this.state.maximumValue}
   step={.5}
   onValueChange={(value) => this.setState({value: this.limitMarkers(value)}) }
   onSlidingComplete={ (value)=>{ SOME CODE }></Slider>

限制标记功能

limitMarkers(i){

    var decimals = Math.round((i - Math.floor(i))*59);
    i = Math.floor(i);
    var hours = currentHour+i;
    var time;

    if(hours > 12){
      if(hours > 24){
        if(hours > 36){
            hours = hours - 36;
            time = ' PM';
            labelIsTomorrow = true;
        }
        else{
          hours = hours - 24;
          time = ' AM';
          labelIsTomorrow = true;
        }
      }
      else{
        hours = hours - 12;
        time = ' PM'
        labelIsTomorrow = false;
      }
    }
    else {
      time = ' AM'
      labelIsTomorrow = false;
    }

    if(decimals < 10) decimals='0'+decimals;

    this.setState({
      label: hours+":"+(decimals),
      TOD: time
    });

    return hours;
  }

Answer 1

代码有效，这是因为我们运行应用程序处于调试模式。一旦我们将其置于发布模式并删除调试移动，延迟就消失了。

React JS 滑块滞后

React JS Slider Lag

javascript

slider

reactjs

react-native