Форум

karakym · #1 (**permalink**) 16.10.2017, 01:36

Доброго времени суток, изучаю javascript и jquery, пишу вот такой вот код:

<style>*{box-sizing:border-box}body{margin:auto;text-align:center}.twrapper{-webkit-perspective:1000px;-webkit-perspective-origin:50% 50%;perspective:1000px;perspective-origin:50% 50%}.tombola{-webkit-transform:rotateX(0deg) translateZ(-480px);-webkit-transform-origin:center center -480px;-webkit-transform-style:preserve-3d;height:200px;margin:120px auto 76px;position:relative;transform:rotateX(0deg) translateZ(-480px);transform-origin:center center -480px;transform-style:preserve-3d;width:600px}.tombola.trns{transition:6s ease all}#spin{background:red;border:0;color:#FFF;font-size:2em;line-height:3em;width:434px}#spin:disabled{background:#8B0000;color:gray;cursor:not-allowed;transition:1s}#spin span{display:block;font-size:.5em}.panel{backgrouns-size:cover;color:#FF0;display:block;font-size:40px;font-weight:700;height:200px;line-height:2em;padding:60px;position:absolute;text-align:center;text-transform:uppercase;top:0;width:600px}.panel:after{background:rgba(0,0,0,0.6);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:3s}.p1{transform:translateZ(240px)}.p2{transform:rotateX(-45deg) translateZ(240px)}.p3{transform:rotateX(-90deg) translateZ(240px)}.p4{transform:rotateX(-135deg) translateZ(240px)}.p5{transform:rotateX(-180deg) translateZ(240px)}.p6{transform:rotateX(-225deg) translateZ(240px)}.p7{transform:rotateX(-270deg) translateZ(240px)}.p8{transform:rotateX(45deg) translateZ(240px)}.bord{animation:1s show linear 1, .5s bord 1s ease-out infinite}.bord:after{background:rgba(0,0,0,0.1);bottom:0;content:"";left:0;position:absolute;right:0;top:0}20%,60%,100%{box-shadow:0 0 0 #FF0}25.0%{box-shadow:10px 10px 40px rgba(255,255,0,1), inset -10px -10px 40px rgba(255,255,0,1)}50.0%{box-shadow:-10px 10px 40px rgba(0,255,0,1), inset 10px -10px 40px rgba(0,255,0,1)}75.0%{box-shadow:-10px -10px 40px rgba(0,255,255,1), inset 10px 10px 40px rgba(0,255,0,1)}100%{box-shadow:10px -10px 40px rgba(255,0,0,1), inset -10px 10px 40px rgba(255,0,0,1)}</style>
<div class="twrapper"><div class="tombola trns">
<div class="panel p1" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 1</div>
<div class="panel p2" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 2</div>
<div class="panel p3" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 3</div>
<div class="panel p4" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 4</div>
<div class="panel p5" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 5</div>
<div class="panel p6" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 6</div>
<div class="panel p7" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 7</div>
<div class="panel p8" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 8</div>
</div></div><button id="spin" class="bord">Крутить!</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$('#spin').click(function(){
  var rotation = [1440,1485,1530,1575,1620,1665,1710,1755];
  var selection = ['p1','p2','p3','p4','p5','p6','p7','p8'];
  var pick = Math.floor(Math.random()*8);
  var spin = rotation[pick]+2880;
  var slct = selection[pick];
  var defbtext = $(this).text();
  var counter = 3;
  var pause = counter * 1000;
  $('.tombola').css({'transform':'rotateX('+spin+'deg) translateZ(-480px)'});
  $('#spin').removeClass('bord').prop('disabled', true);
  $('.'+slct).removeClass('bord');
  $('.tombola').one('transitionend', function(e) {
    $('.'+slct).addClass('bord');
    $('#spin').text($('.'+slct).text());
    setTimeout(func, pause);
    function func() {
      $('.tombola').css({'transform':'rotateX(0deg) translateZ(-480px)'}).removeClass('trns').one('transitionend', function(e) {
        $('.tombola').addClass('trns');
        $('.'+slct).removeClass('bord');
      });
      $('#spin').prop('disabled', false).text(defbtext).addClass('bord');
    }
  });
});
</script>

Через 3 секунды после остановки, барабан плавно возвращается назад(css transition), если вставить alert() в начало функции func() то возвращается мгновенно, как мне и надо. Вот только мне alert() тут лишний.
Вопрос, чем же его заменить? Как приостановить выполнение функции? Может другой метод подскажите?
Вот пример с alert() в функции func():

<style>*{box-sizing:border-box}body{margin:auto;text-align:center}.twrapper{-webkit-perspective:1000px;-webkit-perspective-origin:50% 50%;perspective:1000px;perspective-origin:50% 50%}.tombola{-webkit-transform:rotateX(0deg) translateZ(-480px);-webkit-transform-origin:center center -480px;-webkit-transform-style:preserve-3d;height:200px;margin:120px auto 76px;position:relative;transform:rotateX(0deg) translateZ(-480px);transform-origin:center center -480px;transform-style:preserve-3d;width:600px}.tombola.trns{transition:6s ease all}#spin{background:red;border:0;color:#FFF;font-size:2em;line-height:3em;width:434px}#spin:disabled{background:#8B0000;color:gray;cursor:not-allowed;transition:1s}#spin span{display:block;font-size:.5em}.panel{backgrouns-size:cover;color:#FF0;display:block;font-size:40px;font-weight:700;height:200px;line-height:2em;padding:60px;position:absolute;text-align:center;text-transform:uppercase;top:0;width:600px}.panel:after{background:rgba(0,0,0,0.6);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:3s}.p1{transform:translateZ(240px)}.p2{transform:rotateX(-45deg) translateZ(240px)}.p3{transform:rotateX(-90deg) translateZ(240px)}.p4{transform:rotateX(-135deg) translateZ(240px)}.p5{transform:rotateX(-180deg) translateZ(240px)}.p6{transform:rotateX(-225deg) translateZ(240px)}.p7{transform:rotateX(-270deg) translateZ(240px)}.p8{transform:rotateX(45deg) translateZ(240px)}.bord{animation:1s show linear 1, .5s bord 1s ease-out infinite}.bord:after{background:rgba(0,0,0,0.1);bottom:0;content:"";left:0;position:absolute;right:0;top:0}20%,60%,100%{box-shadow:0 0 0 #FF0}25.0%{box-shadow:10px 10px 40px rgba(255,255,0,1), inset -10px -10px 40px rgba(255,255,0,1)}50.0%{box-shadow:-10px 10px 40px rgba(0,255,0,1), inset 10px -10px 40px rgba(0,255,0,1)}75.0%{box-shadow:-10px -10px 40px rgba(0,255,255,1), inset 10px 10px 40px rgba(0,255,0,1)}100%{box-shadow:10px -10px 40px rgba(255,0,0,1), inset -10px 10px 40px rgba(255,0,0,1)}</style>
<div class="twrapper"><div class="tombola trns">
<div class="panel p1" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 1</div>
<div class="panel p2" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 2</div>
<div class="panel p3" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 3</div>
<div class="panel p4" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 4</div>
<div class="panel p5" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 5</div>
<div class="panel p6" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 6</div>
<div class="panel p7" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 7</div>
<div class="panel p8" style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat center">Пункт 8</div>
</div></div><button id="spin" class="bord">Крутить!</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$('#spin').click(function(){
  var rotation = [1440,1485,1530,1575,1620,1665,1710,1755];
  var selection = ['p1','p2','p3','p4','p5','p6','p7','p8'];
  var pick = Math.floor(Math.random()*8);
  var spin = rotation[pick]+2880;
  var slct = selection[pick];
  var defbtext = $(this).text();
  var counter = 3;
  var pause = counter * 1000;
  $('.tombola').css({'transform':'rotateX('+spin+'deg) translateZ(-480px)'});
  $('#spin').removeClass('bord').prop('disabled', true);
  $('.'+slct).removeClass('bord');
  $('.tombola').one('transitionend', function(e) {
    $('.'+slct).addClass('bord');
    $('#spin').text($('.'+slct).text());
    setTimeout(func, pause);
    function func() {alert('быстро возвращаем');
      $('.tombola').css({'transform':'rotateX(0deg) translateZ(-480px)'}).removeClass('trns').one('transitionend', function(e) {
        $('.tombola').addClass('trns');
        $('.'+slct).removeClass('bord');
      });
      $('#spin').prop('disabled', false).text(defbtext).addClass('bord');
    }
  });
});
</script>

рони · #2 (**permalink**) 16.10.2017, 02:34

karakym,

function func() {
       $('.tombola').removeClass('trns').css({'transform':'rotateX(0deg) translateZ(-480px)'});
       $(window).height();
       $('.tombola').addClass('trns');
       $('.'+slct).removeClass('bord');
       $('#spin').prop('disabled', false).text(defbtext).addClass('bord');
    }

karakym · #3 (**permalink**) 16.10.2017, 04:16

рони,
Цены тебе нет!!! Спасибо!

Форум

Справочник

Discord чат

Курсы javascript