Как я могу показать счетчик при длительном выполнении JavaScript?

Question

Я играл с этим в течение длительного времени и не могу получить spinner в CSS, чтобы показывать, когда я нажимаю кнопку, а затем скрываю после выполнения функции JavaScript. Это фрагмент того, что я пытаюсь сделать с использованием чистого JavaScript.

<button id="spinBtn" onclick="spinIt()">Spin it</button> 
<div class="spinner" style="visibility:hidden;"> 

<script> 
function spinIt() { 
    document.getElementsByClassName("spinner").style.visibility = "visible"; 
    setTimeout(function() { 
     // long code here 
     document.getElementsByClassName("spinner").style.visibility = "hidden"; 
    }, 1); // give it a moment to redraw 
} 
</script> 

http://jsfiddle.net/imparante/h9kLL1se/

Answer 1

Попробуйте

Вместо document.getElementsByClassName используйте document.querySelectorAll и увеличить интервал времени SetTimeout.

И document.getElementsByClassName вернуть массив элемента соответствия. Для того, чтобы выбрать первый элемент, используйте document.getElementsByClassName('spinner')[0]

function spinIt() { 
 
    document.querySelectorAll(".spinner")[0].style.visibility = "visible"; 
 
    setTimeout(function() { 
 
    // long code here 
 
    document.querySelectorAll(".spinner")[0].style.visibility = "hidden"; 
 
    }, 1000); // give it a moment to redraw 
 
}

.spinner { 
 
    margin: 100px auto; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: relative; 
 
} 
 
.container1 > div, 
 
.container2 > div, 
 
.container3 > div { 
 
    width: 6px; 
 
    height: 6px; 
 
    background-color: #333; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 
 
    animation: bouncedelay 1.2s infinite ease-in-out; 
 
    /* Prevent first frame from flickering when animation starts */ 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.spinner .spinner-container { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container2 { 
 
    -webkit-transform: rotateZ(45deg); 
 
    transform: rotateZ(45deg); 
 
} 
 
.container3 { 
 
    -webkit-transform: rotateZ(90deg); 
 
    transform: rotateZ(90deg); 
 
} 
 
.circle1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.circle2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.circle3 { 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.circle4 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
.container2 .circle1 { 
 
    -webkit-animation-delay: -1.1s; 
 
    animation-delay: -1.1s; 
 
} 
 
.container3 .circle1 { 
 
    -webkit-animation-delay: -1.0s; 
 
    animation-delay: -1.0s; 
 
} 
 
.container1 .circle2 { 
 
    -webkit-animation-delay: -0.9s; 
 
    animation-delay: -0.9s; 
 
} 
 
.container2 .circle2 { 
 
    -webkit-animation-delay: -0.8s; 
 
    animation-delay: -0.8s; 
 
} 
 
.container3 .circle2 { 
 
    -webkit-animation-delay: -0.7s; 
 
    animation-delay: -0.7s; 
 
} 
 
.container1 .circle3 { 
 
    -webkit-animation-delay: -0.6s; 
 
    animation-delay: -0.6s; 
 
} 
 
.container2 .circle3 { 
 
    -webkit-animation-delay: -0.5s; 
 
    animation-delay: -0.5s; 
 
} 
 
.container3 .circle3 { 
 
    -webkit-animation-delay: -0.4s; 
 
    animation-delay: -0.4s; 
 
} 
 
.container1 .circle4 { 
 
    -webkit-animation-delay: -0.3s; 
 
    animation-delay: -0.3s; 
 
} 
 
.container2 .circle4 { 
 
    -webkit-animation-delay: -0.2s; 
 
    animation-delay: -0.2s; 
 
} 
 
.container3 .circle4 { 
 
    -webkit-animation-delay: -0.1s; 
 
    animation-delay: -0.1s; 
 
} 
 
@-webkit-keyframes bouncedelay { 
 
    0%, 80%, 100% { 
 
    -webkit-transform: scale(0.0) 
 
    } 
 
    40% { 
 
    -webkit-transform: scale(1.0) 
 
    } 
 
} 
 
@keyframes bouncedelay { 
 
    0%, 80%, 100% { 
 
    transform: scale(0.0); 
 
    -webkit-transform: scale(0.0); 
 
    } 
 
    40% { 
 
    transform: scale(1.0); 
 
    -webkit-transform: scale(1.0); 
 
    } 
 
}

<p> 
 
    <button id="comboBtn" onclick="spinIt()">Combo it</button> 
 
</p> 
 

 
<div class="spinner" style="visibility:hidden"> 
 
    <div class="spinner-container container1"> 
 
    <div class="circle1"></div> 
 
    <div class="circle2"></div> 
 
    <div class="circle3"></div> 
 
    <div class="circle4"></div> 
 
    </div> 
 
    <div class="spinner-container container2"> 
 
    <div class="circle1"></div> 
 
    <div class="circle2"></div> 
 
    <div class="circle3"></div> 
 
    <div class="circle4"></div> 
 
    </div> 
 
    <div class="spinner-container container3"> 
 
    <div class="circle1"></div> 
 
    <div class="circle2"></div> 
 
    <div class="circle3"></div> 
 
    <div class="circle4"></div> 
 
    </div> 
 
</div>

Answer 2

document.getElementsByClassName возвращает многие элементы (множественное число). По крайней мере, вы должны были бы сделать это:

document.getElementsByClassName("spinner")[0].style.visibility = "visible"; 
              ^^^ 

Хотя вы должны либо петли через этот список элементов и сделать всех блесен видны, или вы должны использовать уникальный id для вашей блесны и получить эту конкретный счетчик через document.getElementById (единственное число).