如何回调以在条件下闪烁

Question

在0s时，我希望它独立地从按钮闪烁div.count。至少我认为这个代码没有问题。

我正在尝试回调以在类似于此线程的答案的条件下闪烁。我完全不知道如何设置这些功能，所以把它们放在哪里以及如何把它们放

let btn = document.querySelector("#btn");
setInterval(function() {
let count = document.querySelector("#count");
let result = Number(count.innerText) - 1;
if (result < 0) {
result = 3;
}
count.innerText = result;
}, 1000);

*,
*::after,
*::before {
padding: 0px;
margin: 0px;
font-family: inherit;
}
html,
body {
height: 100vh;
}
body {
font-family: sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.counter_conatiner {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
margin-top: 1rem;
}
#count {
font-size: 3rem;
background-color: #4c96af;
padding: 2px 12px;
margin-left: 16px;
margin-right: 16px;
border-radius: 4px;
color: #fff;
}
button {
position: relative;
background-color: #4caf50;
border: none;
font-size: 28px;
color: #ffffff;
padding: 15px;
width: 150px;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
border-radius: 3px;
}
button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.blink-bg {
color: #fff;
padding: 10px;
display: inline-block;
border-radius: 5px;
animation: blinkingBackground 100ms none;
}
@keyframes blinkingBackground {
50% {
background-color: #ef0a1a;
}
}

<h1>callback</h1><br />
<div id="count">3</div><br />
<button id="btn">blink count by this button at 0s each times</button>

Answer 1

希望我正确理解你

let interval;
function btnClick(){
if(interval){
clearInterval(interval);
interval = null;
}else {
interval = setInterval(function() {
let count = document.querySelector("#count");
let result = Number(count.innerText) - 1;

if (result < 0) {
result = 3;
}

count.innerText = result;
}, 1000);
}
}