0

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.

enter image description here

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.

khashashin
  • 1,058
  • 14
  • 40
  • You never call `event.preventDefault()`, so clicking on the link will reload the page. – Barmar Nov 20 '18 at 21:16
  • I have deployed it with this bug, so you can test using dev-tools https://l2ob.netlify.com/ – khashashin Nov 20 '18 at 21:26
  • 1
    `setInterval(respawnTimeCountdown(), 1000)` should be `setInterval(respawnTimeCountdown, 1000)`. This is mentioned in the [Q1](https://stackoverflow.com/questions/9724968/javascript-setinterval-runs-only-one-time) you linked to – Phil Nov 20 '18 at 21:31

0 Answers0