Интересует такой момент, как можно сделать что бы функция JS по нажатию на button выполнялась только 1 раз, т.е если еще раз повторить клик, что бы она не запускалась еще раз заново. Т.е проблема в том, что когда на странице нажимаешь на "START" функция работает как надо, но когда нажимаешь на "STOP" она запускается снова с самого начала, а не прекращает свою работу. Спасибо заранее. Код:
function ex(id) {
document.getElementById(id).style.display = 'inline';
}
document.getElementById('btn').addEventListener('click', function() {
setTimeout(function() {
ex('firstArrow');
}, 1000);
setTimeout(function() {
ex('secondArrow');
}, 3000);
setTimeout(function() {
ex('thirdArrow');
}, 4000);
});
.checkmark-circle {
position: relative;
display: none;
vertical-align: top;
}
.checkmark-circle .background {
width: 70px;
height: 70px;
border-radius: 50%;
background: #2196f3;
position: relative;
}
.checkmark-circle .checkmark {
border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: checkmark;
-moz-animation-name: checkmark;
animation-name: checkmark;
-webkit-transform: scaleX(-1) rotate(135deg);
-moz-transform: scaleX(-1) rotate(135deg);
-ms-transform: scaleX(-1) rotate(135deg);
-o-transform: scaleX(-1) rotate(135deg);
transform: scaleX(-1) rotate(135deg);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
opacity: 1;
height: 25px;
width: 27.5px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
border-right: 10px solid white;
border-top: 10px solid white;
border-radius: 2.5px !important;
content: '';
left: 3px;
top: 26px;
position: absolute;
}
@-webkit-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@-moz-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 25px;
width: 25.5px;
opacity: 1;
}
100% {
height: 40px;
width: 30px;
opacity: 1;
}
}
.w3-button {
width: 160px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><button class="w3-button w3-deep-orange" id="btn">Deep Orange</button></p>
<div class="checkmark-circle" id="firstArrow">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>
<br>
<div class="checkmark-circle" id="secondArrow">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>
<br>
<div class="checkmark-circle" id="thirdArrow">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>