javascript - 如何阻止我的“轮盘赌风格”号码选择器滞后？

Question

我正在开发基于此代码笔的轮盘赌式数字选择器：

https://codepen.io/tim-rayner/pen/QWgjvYx

在 react 中复制了这个轮盘赌之后，我注意到轮子在旋转时似乎落后了；并不总是在瞬间将卡片呈现在轮子容器的末端（或似乎超前），如果运行代码笔，我相信您将能够使用提供的示例轻松重现。

似乎动画太快了卡片无法及时渲染......对此的任何帮助将不胜感激。谢谢！

$(document).ready(function() {
//setup multiple rows of colours, can also add and remove while spinning but overall this is 
easier.
initWheel();

$('button').on('click', function(){
    var outcome = parseInt($('input').val());
spinWheel(outcome);
  });
});

function initWheel(){
    var $wheel = $('.roulette-wrapper .wheel'),
    row = "";
  
  row += "<div class='row'>";
  row += "  <div class='card red'>1<\/div>";
  row += "  <div class='card black'>14<\/div>";
  row += "  <div class='card red'>2<\/div>";
  row += "  <div class='card black'>13<\/div>";
  row += "  <div class='card red'>3<\/div>";
  row += "  <div class='card black'>12<\/div>";
  row += "  <div class='card red'>4<\/div>";
  row += "  <div class='card green'>0<\/div>";
  row += "  <div class='card black'>11<\/div>";
  row += "  <div class='card red'>5<\/div>";
  row += "  <div class='card black'>10<\/div>";
  row += "  <div class='card red'>6<\/div>";
  row += "  <div class='card black'>9<\/div>";
  row += "  <div class='card red'>7<\/div>";
  row += "  <div class='card black'>8<\/div>";
  row += "<\/div>";

    for(var x = 0; x < 29; x++){
    $wheel.append(row);
  }
}

function spinWheel(roll){
  var $wheel = $('.roulette-wrapper .wheel'),
        order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
        position = order.indexOf(roll);
        
  //determine position where to land
  var rows = 12,
      card = 75 + 3 * 2,
      landingPosition = (rows * 15 * card) + (position * card);

  var randomize = Math.floor(Math.random() * 75) - (75/2);

  landingPosition = landingPosition + randomize;

  var object = {
        x: Math.floor(Math.random() * 50) / 100,
        y: Math.floor(Math.random() * 20) / 100
    };

  $wheel.css({
        'transition-timing-function':'cubic-bezier(0,'+ object.x +','+ object.y + ',1)',
        'transition-duration':'6s',
        'transform':'translate3d(-'+landingPosition+'px, 0px, 0px)'
    });

  setTimeout(function(){
        $wheel.css({
        'transition-timing-function':'',
        'transition-duration':'',
    });

    var resetTo = -(position * card + randomize);
    $wheel.css('transform', 'translate3d('+resetTo+'px, 0px, 0px)');
  }, 6 * 1000);
}

标签： javascriptreactjs