Creating a function loop in jquery

Question

I have this code which works fine. When the countdown gets to 0 it calls the refresh function. However, after the refresh function is complete, I want the countdown timer to start back at 1:00 again. I can't call the countdown timer function because it is within the main onload function. Is the right solution to this to put another function inside $(function() { } and call that?

var interval = null;

// COUNTDOWN TIMER
$(function() {
  var start = "1:00";
  interval = setInterval(function() {
    var timer = start.split(':');
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) {
      refresh();
    } else {
      seconds = (seconds < 0) ? 59 : seconds;
      seconds = (seconds < 10) ? '0' + seconds : seconds;
      $('.countdown').html(minutes + ':' + seconds);
      start = minutes + ':' + seconds;
    }
  }, 1000);
});

// MY REFRESH FUNCTION
function refresh() {
  clearInterval(interval);
  $('.countdown').html("Refreshing");
}

Put the contents of your document ready in a separate method. Call that method from the document ready, and after you "refresh" — Taplar
– Taplar, Commented Sep 27, 2018 at 16:03

tao · Accepted Answer · 2018-09-27 16:21:15Z

1

Just name the entire routine and you're free to call it:

var interval,
    runCountdown = function() {
      var start = "0:11";
      interval = setInterval(function() {
        var timer = start.split(':'),
            minutes = parseInt(timer[0], 10),
            seconds = parseInt(timer[1], 10);
        --seconds;
        minutes = (seconds < 0) ? --minutes : minutes;
        if (minutes < 0) {
          refresh();
        } else {
          seconds = (seconds < 0) ? 59 : seconds;
          seconds = (seconds < 10) ? '0' + seconds : seconds;
          $('.countdown').html(minutes + ':' + seconds);
          start = minutes + ':' + seconds;
        }
      }, 1000);
    },
    refresh = function () {
      clearInterval(interval);
      $('.countdown').html("Refreshing...");
      runCountdown();
    };

$(function() {
  runCountdown();
});

.countdown {
  font-size: 3rem;
  display: flex;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="countdown"></div>

The same way you call refresh() from your function, you can call another function from refresh. As long as you give it a reference. A name.

edited Sep 27, 2018 at 16:21

answered Sep 27, 2018 at 16:08

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tao Over a year ago

You're welcome. Btw, you don't need to init the interval to null. Declaring without a value is enough to make it available in that context (and it updates when you change it inside your functions - because they all reference the same object).

Collectives™ on Stack Overflow

Creating a function loop in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related