I know there is a bunch of questions about setInterval and especially about the issue that it runs only one time, I had followed them but didn't get any info that could help me. Q1, Q2, Q3, Q4 etc...
Becoz I use setInterval()
several times, I have to control each running event separately, I found a useful blog post about handling multiple setInterval
events. http://clarkeulmer.com/handling-multiple-timers-with-javascripts-setinterval-and-jquery/
On the following screenshot, you can see what I'm trying to do. When "Killed" button was clicked there should appear countdown.
Following the tutorial that I mentioned above, I wrote the following code:
$('tbody a.killed').click(function(){
// Adds 30 min to current time
var respawnTime = moment().add(30, 'minutes').format('HH:mm:ss');
// Sets countdown for 30 min
var eventTime = moment().add(30, 'minutes').unix();
var currentTime = moment().unix();
var diffTime = eventTime - currentTime;
var duration = moment.duration(diffTime * 1000, 'milliseconds');
var that = this;
function respawnTimeCountdown(){
duration = moment.duration(duration.asMilliseconds() - 1000, 'milliseconds');
var h = moment.duration(duration).hours(),
m = moment.duration(duration).minutes(),
s = moment.duration(duration).seconds();
h = $.trim(h).length === 1 ? '0' + h : h;
m = $.trim(m).length === 1 ? '0' + m : m;
s = $.trim(s).length === 1 ? '0' + s : s;
if (duration > 0){
// Removes time from the table if it exists
if($(that).parent().prevAll(':eq(0)').has('p')) {
$(that).parent().prevAll(':eq(0)').children().remove();
}
// show how many hours, minutes and seconds are left
$(that).parent().prevAll(':eq(0)').append("<p>" + h + ":" + m + ":" + s + "</p>");
}
else {
// Removes time from the table if it exists
if($(that).parent().prevAll(':eq(0)').has('p')) {
$(that).parent().prevAll(':eq(0)').children().remove();
}
$(that).parent().prevAll(':eq(0)').append("<p>" + "<b class='fight'>" + "⚔" + "</b>" + "</p>");
}
}
var intervalId = setInterval(respawnTimeCountdown(), 1000);
if(diffTime > 0) {
$(this).parent().prevAll(':eq(0)').children().attr('data-timer-id', intervalId)
}
// Add class 'disabled' to button "Killed" to prevent multiple event calls
if($(this).parent().prevAll(':eq(0)').children().has('p')) {
$(this).addClass('disabled');
}
// Removes time from the table if it exists
if($(this).parent().prevAll(':eq(1)').has('p')) {
$(this).parent().prevAll(':eq(1)').children().remove();
}
// Puts re-spawn time in the table.
$(this).parent().prevAll(':eq(1)').append("<p>"+respawnTime+"</p>");
});
And here is my DOM:
<tbody>
<tr>
<th>1</th>
<td></td>
<td></td>
<td>
<a class="killed right waves-effect waves-light btn-small blue-grey">Killed</a>
<a style="margin-right: 5px" class="clear right waves-effect waves-light btn-small orange">Clear</a>
</td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td>
<a class="killed right waves-effect waves-light btn-small blue-grey">Killed</a>
<a style="margin-right: 5px" class="clear right waves-effect waves-light btn-small orange">Clear</a>
</td>
You can found this tool on the following link https://l2ob.netlify.com/ It will be easy to test using browser dev-tool.