Using setInterval in a loop to change interval

Question

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.

When you clear your interval that is when you need to create a new one. That is also when you need to recalculate your interval value other wise it will run at the same speed. Currently if `i === length - 1` the interval will and stop and that is it. I think what you want at that point is to change the interval speed? — ste2425, Oct 12 '15 at 06:55
Oh, I should clarify. When i === length-1, the loop should end. The linestring will be finished. It is the code in the else statement that is not working. Basically, I am rendering a vector line (a linestring) segment by segment. — interwebjill, Oct 12 '15 at 07:00
I could have written `if (i < length) { i++; map.addLayer(trackLayer); clearInterval(timer); currentTime = tracksTime[i]; nextTime = tracksTime[i+1]; timer = setInterval(function(){ segmentconstruction(multipointCoords); }, transitionTime); } else { clearInterval(timer); } };` — interwebjill, Oct 12 '15 at 07:02

Anonymous0day · Accepted Answer · 2015-10-12T15:04:56.080

    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>

I think you are right. I need to redefine transitionTime in the `else` statement. I thought the definition would carry over from above. — interwebjill, Oct 12 '15 at 14:37
Something else to check is that you never start with a i superior than length `if (i === length - 1) {` should be replaced by `if (i >= length - 1) {` ! i update my code for that. — Anonymous0day, Oct 12 '15 at 15:03

Using setInterval in a loop to change interval

1 Answers1