What am I doing wrong? Javascript is acting wierd over time (setInterval())

Question

I am trying to loop over a json array with the fetch() function and display 8 items at a time for 8 seconds and repeat itself but javascript is going crazy and running through the array after a while.

The first iteration is fine.

Any help much appreciated.

Not sure whats going wrong.

$(document).ready(function () {
   console.log('working...');
   FetchData();
   });

 function FetchData() {
  fetch(dataPath)
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      data = json;
      clearInterval();
      DisplayData(data);
    })
    .catch(function (error) {
      console.log(error);
      setInterval(FetchData, 5000);
    })
}

function DisplayData(data) {
    let golferDisplayData = data.Golfers;
  var indexOffset = 0;
  $containerContentSection.html(templateMainContent(golferDisplayData.slice(indexOffset, indexOffset + 8)));
  indexOffset += 7;

  setInterval(() => {

    console.log(indexOffset);
    // console.log(indexOffset, golferDisplayData.length);
    // console.log(golferDisplayData.slice(indexOffset, indexOffset + 8));
    $containerContentSection.html(templateMainContent(golferDisplayData.slice(indexOffset, indexOffset + 8)));

    indexOffset += 7;

    if(indexOffset >= golferDisplayData.length) {
      indexOffset = 0;
      FetchData();
    }

  }, 8000);
}

I am trying to loop over a json array with the fetch() and display 8 items every 8 seconds at a time and repeat itself, After it completes one rotation it should fetch the json file again.

You're calling `setInterval` instead of `setTimeout`, creating infinite calls to `FetchData()`. Read [this](https://stackoverflow.com/questions/37951980/set-ticker-to-use-settimeout-instead-of-setinterval) for further explanation — GalAbra, Jul 24 '19 at 13:19
You need to save `intervalId` and clear it like `clearInterval(intervalId)` — Roberto Zvjerković, Jul 24 '19 at 13:20
`clearInterval();` look how that works by reading the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) — epascarello, Jul 24 '19 at 13:21
@ritaj - bad advice. `setInterval` is wrong in this case, especially if it's going to be cleared every time it executes. This is exactly what `setTimeout` is for. — Reinstate Monica Cellio, Jul 24 '19 at 13:21
The comments about `setTimeout` are right. However, if you still wanna use `setInterval`, you've to store it on a variable and then pass it as an argument to `clearInterval`. Something like: `let intervalID = setInterval(...)` then `clearInterval(intervalID)` — Renan Souza, Jul 24 '19 at 13:23

E13 · Answer 1 · 2019-07-24T13:30:43.070

2

The interval is not being cleared.

The interval needs to be assigned to a variable like this: let myInterval = setInterval().

Then you can clear the interval like this: clearInterval(myInterval).

Alternatively, as you are only using the interval for 1 iteration and immediately clearing it afterwards, you can use setTimeout().

edited Jul 24 '19 at 13:30

answered Jul 24 '19 at 13:24

E13

443
5
12

What am I doing wrong? Javascript is acting wierd over time (setInterval())

1 Answers1