React JS Slider Lag

时间:2016-08-20 01:36:03

标签: javascript reactjs slider react-native

我们正在使用滑块按时间过滤。目前,当我们将它加载到手机并使用它时,存在很多延迟,当滑动滑块时,它似乎在物理显示时间。以下是我们的代码,为什么会发生这种情况的任何想法?我们是否需要更新我们如何计算价值(我们将其作为股票价值,设置状态并仍然看到滞后因此我们不相信它就是这样)。目前我们正在尝试在此滑块上显示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;
  }

1 个答案:

答案 0 :(得分:1)

代码有效,这是因为我们在调试模式下运行应用程序。一旦我们将其置于释放模式并移除调试移动,滞后就消失了。