JSFiddle - React, Tailwind, and code Playground
HTML
<button id="start">Start</button>
<button id="stop">Stop</button>
<p id="blink">Some text which blinking.</p>
JavaScript
var Blinker = {
interval: null,
start: function() {
if (this.interval) return;
this.interval = setInterval(function() {
$('#blink').toggle();
}, 250);
},
stop: function() {
clearInterval(this.interval);
$('#blink').show();
this.interval = null;
}
}
//Initialize blink status.
var blinkStatus = 1;
//Check if status is changed, and run/stop blinking.
setInterval(function() {
if (blinkStatus == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
}, 250);
$('#start').on('click', function() {
blinkStatus = 1;
});
$('#stop').on('click', function() {
blinkStatus = 0;
});