interwebjill interwebjill - 7 months ago 53
Javascript Question

Using setInterval in a loop to change interval

I am using the technique in the second answer here:

Changing the interval of SetInterval while it's running

but the change in the interval is not being set. Code is also using OpenLayers 3:

var coordinate,
i = 1,
length = multipointCoords[0].length;

var currentTime = tracksTime[0];
var nextTime = tracksTime[1];
speedOption = 100; // the highter this value, the faster the tracks, see next line
var transitionTime = (nextTime - currentTime) / speedOption;

var timer;

timer = setInterval(function() {
segmentConstruction(multipointCoords, tracksTime);
}, transitionTime);

function segmentConstruction(multipointCoords, tracksTime) {
coordinate = ol.proj.fromLonLat(multipointCoords[0][i]);
lineString.appendCoordinate(coordinate);

if (i === length - 1) {
clearInterval(timer);
} else {
i++;
map.addLayer(trackLayer);
clearInterval(timer);
currentTime = tracksTime[i];
nextTime = tracksTime[i + 1];
timer = setInterval(function() {
segmentConstruction(multipointCoords);
}, transitionTime);
};
};


What am I doing wrong?

Thanks.

Answer
    var currentTime = tracksTime[0];
    var nextTime = tracksTime[1];
    speedOption = 100; // the highter this value, the faster the tracks, see next line
    var transitionTime = (nextTime - currentTime) / speedOption;

You calculate transitionTime here.

        if (i === length - 1) {
            clearInterval(timer);
        } else {
            i++;
            map.addLayer(trackLayer);
            clearInterval(timer);
            currentTime = tracksTime[i];//<------------------|
            nextTime = tracksTime[i + 1];//<-----------------|
            timer = setInterval(function() {//               | 
                segmentConstruction(multipointCoords);//     |
            }, transitionTime);// <----------------------------->Not redefined
        };

Here you use the same transitionTime as above it is not redifined ! Why not, It's not an error, but ...

I don't think your issue come from the timer, but from the param's you have.

Here a snippet to see that your code concerning timing and interval have no problem : I just removed everything not concerned by 'timing' and interval.

var log = function(val){
    console.log(val);
    document.getElementById('el').innerHTML+='<div><pre>' + val + '</pre><div>';
  }

var timer ,
    i = 1 , 
    length = 5 ,
    transitionTime = 200 ;



        timer = setInterval(function() {
          log('first timerId : ' + timer);
          
            segmentConstruction()
        
        }, transitionTime );

        function segmentConstruction(multipointCoords, tracksTime) {
          log(' \tsegmentConstruction : i = ' + i + ' / ' + length);
        
          //if (i === length - 1) {
          if (i >= length - 1) {
                clearInterval(timer);
                log('\t\twe finish with : i = ' + i + ' / ' + length);
            } else {
                i++;
                clearInterval(timer);
                timer = setInterval(function() {
                    log('loop timerId : ' + timer);
                    segmentConstruction();
                }, transitionTime);
            };
        };
<div id='el'></div>