CODEWITHSUNDEEP
javascript
Karol Jankiewicz
Karol Jankiewicz

Reputation: 153

clearInterval and set it again after x seconds

I want to do simple interval with with if, It is checking a variable's value and doing a function again().

again function contains clearInterval, i++ and setTimeout to call interval again after x seconds

    var speed = 1000;
    var wait = 0;
    var i = 0;

    function init() {
        setInterval(function() {
            if (i >= 6) i = 0;
            if (i == 4) {
                wait = 5000;
                again(wait);
            } else {
                document.body.innerHTML = i;
                i++;
            }
        }, speed);
    }

    function again(time) {
        clearInterval(init());
        i++;
        setTimeout(function() {
            setInterval(init(), speed);
        }, time);
    }
    init();

I expect output like this:

1, 2, 3, Waiting x sec's , 5, 1, 2, ...

but code is doing some thing crazy, Its going faster and faster. I don't know why.

Here's a codepen with example (can crash your browser!)

Can you fix it and explain? Thanks

Upvotes: 1

Views: 736

Answers (2)

jherax
jherax

Reputation: 5267

This is a small example how changing the delay of a setInterval call.

(function iife() {
    var timer = null,
        counter = 0;

  function task() {
    counter += 1;
    console.log(counter);
    // condition: every four reps
    if (counter % 4 === 0) {
      console.log("changed speed to 4 seconds");
      return start(4000);
    }
    // condition: every seven reps
    if (counter % 7 === 0) {
      console.log("changed speed to 2 seconds");
      return start(2000);
    }
  }

  function start(delay) {
    clearInterval(timer);
    console.log("runs every " + delay + " miliseconds");
    timer = setInterval(task, delay);
  }

  start(1000);

}());

Upvotes: 0

Maciej Sikora
Maciej Sikora

Reputation: 20162

You are not clearing interval but use function inside clearInterval method. Method init which is used has no return statement so clearInterval gets undefined in attribute, so it is not clearing nothing.

Fixed code:

var speed = 1000;
var wait = 0;
var i = 0;
var interval=null;

function init() {
    interval = setInterval(function() {
        if (i >= 6) i = 0;
        if (i == 4) {
            wait = 5000;
            again(wait);
        } else {
            document.body.innerHTML = i;
            i++;
        }
    }, speed);
}

function again(time) {
    clearInterval(interval);
    i++;
    setTimeout(function() {

    init()

    }, time);
}

init();

Function setInterval returns interval id and function clearInterval in attribute should get id of interval which we want to stop, so I created interval variable to save id. I am using this variable in clearInterval.

Upvotes: 3

Related Questions