Как установить задержку для функции? - PullRequest
Новая
       4

Как установить задержку для функции?

1 голос
/ 16 марта 2019

Я знаю, что на этот вопрос можно ответить разными способами, но мне нужен кто-то, кто сделает это за меня.Я хочу, чтобы моя анимация сделала свое дело, а затем появляется случайное число?Прямо сейчас у меня есть 2 функции в один клик (мне это нужно).Я новичок в этом, и простая формула была бы отличной!Может ли кто-нибудь помочь, если вы можете это было бы оценено!Спасибо!ЭТО ВСЕ КОДЕКС! 

startbtn = function() {
  $('.wheel').addClass('animated-wheel');
  setTimeout(setRandom('random') {}, 6000);
}

function getRandom() {
  var values = [1, 15, 30, 45];
  return values[Math.floor(Math.random() * values.length)];
}

function setRandom(id) {
  document.getElementById(id).innerHTML = getRandom();
}

function refresh() {
  location.reload();
};
.number {
  text-align: center;
  color: white;
  font-size: 78px;
}

.wheel {
  width: 200px;
  height: 100px;
  left: 600px;
  top: 300px;
  background: green;
  position: relative;
}

.animated-wheel {
  -webkit-animation: myfirst4s 2;
  -webkit-animation-direction: alternate;
  animation: myfirst 4s 2;
  animation-direction: alternate;
}

@-webkit-keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: black;
    left: 600px;
    top: 0px;
  }
  66% {
    background: red;
    left: 600px;
    top: 650px;
  }
  100% {
    background: black;
    left: 600px;
    top: 0px;
  }
}

@keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: green;
    left: 600px;
    top: 300px;
  }
  66% {
    background: black;
    left: 600px;
    top: 0px;
  }
  100% {
    background: red;
    left: 600px;
    top: 650px;
  }
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>

<head></head>
<title>The Wheel!</title>

<body bgcolor="orange">

  <head>

  </head>
  <div class="wheel">
    <h1 class="number" id="random"></h1>
  </div>
  <button onclick="startbtn();setRandom('random');">Start</button>
  <button onclick="refresh()">Reset</button>






</body>

</html>

Ответы [ 2 ]

3 голосов
/ 16 марта 2019

В вашем setTimeout():

произошла синтаксическая ошибка 

startbtn = function() {
  $('.wheel').addClass('animated-wheel');
  setTimeout(function() {
    // Remove animation class
    setRandom('random');
    $('.wheel').removeClass('animated-wheel');
  }, 6750);
}


function getRandom() {
  var values = [1, 15, 30, 45];
  return values[Math.floor(Math.random() * values.length)];
}

function setRandom(id) {
  document.getElementById(id).innerText = getRandom();
}

function refresh() {
  location.reload();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head></head>
<title>The Wheel!</title>

<body bgcolor="orange">

  <head>
    <style>
      .number {
        text-align: center;
        color: white;
        font-size: 78px;
      }
      
      .wheel {
        width: 200px;
        height: 100px;
        left: 600px;
        top: 300px;
        background: green;
        position: relative;
      }
      
      .animated-wheel {
        -webkit-animation: myfirst4s 2;
        -webkit-animation-direction: alternate;
        animation: myfirst 4s 2;
        animation-direction: alternate;
      }
      
      @-webkit-keyframes myfirst {
        0% {
          background: green;
          left: 600px;
          top: 300px;
        }
        33% {
          background: black;
          left: 600px;
          top: 0px;
        }
        66% {
          background: red;
          left: 600px;
          top: 650px;
        }
        100% {
          background: black;
          left: 600px;
          top: 0px;
        }
      }
      
      @keyframes myfirst {
        0% {
          background: green;
          left: 600px;
          top: 300px;
        }
        33% {
          background: green;
          left: 600px;
          top: 300px;
        }
        66% {
          background: black;
          left: 600px;
          top: 0px;
        }
        100% {
          background: red;
          left: 600px;
          top: 650px;
        }
      }
    </style>
  </head>
  <div class="wheel">
    <h1 class="number" id="random"></h1>
  </div>
  <button onclick="startbtn();">Start</button>
  <button onclick="refresh()">Reset</button>
</body>

</html>

Надеюсь, это поможет,

3 голосов
/ 16 марта 2019

Есть множество более элегантных способов, но вот исправление вашей ошибки: 

setTimeout(function(){  
    setRandom('random')
}, 6000);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...