function inside function not executing

Question

I have a piece of code

function a() {
  for(var i = 0; i<10;i++) {
    function b() {
      //do something
    }
  setTimeout(b, 1000);
  }
}

When I run the code it runs fine except there is no wait the code execute as if there was never any timeout

Edit ---- more detailed code. something is not working in this code as there is no delay even tho there is a timeout set which varies between 500ms and 800ms, the deltas variable is 8

function dataServer() {
          $.getJSON("/service/data/message", function(data) {
                if(data) {
                    msgs = data;
                            check = true;
                            counter = 0;
                            var total = data.length;
                            waitTime = (60000 / total) - (8 * delay);
                            for(var message in data) {
                                var latLng = new google.maps.LatLng(-54.75, 148);
                                var marker = new google.maps.Marker({
                                                                    position: latLng,
                                                                    map: map,
                                                                    optimized: true,
                                                                    icon: new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(85, 60))
                                                                    });
                                position = [-55, 148];
                                result = [ data[message].x, data[message].y ];
                                i = 0;
                                deltaLat = (result[0] - position[0])/numDeltas;
                                deltaLng = (result[1] - position[1])/numDeltas;
                                var w = 85;
                                var h = 60;
                                var shrinkW = w / 2;
                                var shrinkH = h /2;
                                var shrinkDeltaW = shrinkW / numDeltas;
                                var shrinkDeltaH = shrinkH / numDeltas;
                                var deltaW = w / numDeltas;
                                var deltaH = h / numDeltas;
                                var toSet = true;

                                function moveMarker(result){
                                    position[0] += deltaLat;
                                    position[1] += deltaLng;

                                    if(i % 4 == 0) {                    
                                        w -= deltaW;
                                        h -= deltaH;
                                    }

                                    var latlng = new google.maps.LatLng(position[0], position[1]);
                                    marker.setPosition(latlng);
                                    marker.setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(w, h)));

                                    if(i == (numDeltas - 1)) {
                                        var latlng = new google.maps.LatLng(data[message].x, data[message].y);
                                        marker.setPosition(latlng);
                                        i++;
                                    }

                                    if(i!=numDeltas){
                                        i++;
                                        if(markerArray.length > 10) {
                                            shrinkW -= shrinkDeltaW;
                                            shrinkH -= shrinkDeltaH;
                                            markerArray[0].setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(shrinkW, shrinkH)));
                                            if(i == (numDeltas -1)) {
                                                markerArray[0].setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(85, 60)));
                                                markerArray[0].setMap(null);
                                                markerArray.splice(markerArray[0], 1);
                                                feature = map.data.getFeatureById(dataArray[0].countryCode);
                                                if (feature) {
                                                    feature.setProperty('colour', dataArray[0].opacity);
                                                } else {
                                                }
                                                dataArray.splice(dataArray[0], 1);
                                            }

                                        }
                                        //delay = waitTime / 8;
                                        setTimeout(moveMarker, waitTime);
                                    } 

                                }

                                moveMarker(result);

                                markerArray.push(marker);
                                dataArray.push(data[message]);

                                //if(stop) { break; }
                            }


                } else {


                    dataServer();
                }


          }); 

        if(check == false) {
            counter++;
            if(counter == 100) {
                window.location.href = "/intermission.htm";
            }   
        }

        check = false;
    }

@ProllyGeek - Except it executes 10 times immediately with the same value. — RobH, May 09 '14 at 14:33
@RobH this is because i was set before the function was excuted the OP issue is the delay , is not it ? — ProllyGeek, May 09 '14 at 14:35
@RobH b is just a function to log (i) , while a is just function to increment (i) — ProllyGeek, May 09 '14 at 14:36
A for loop doesn't wait for the timeouts as setTimeout is async, it just completes the loop immediately setting all the timeouts to expire at approximately the same time. — adeneo, May 09 '14 at 14:37
@ProllyGeek - executing the same function 10 times at roughly the same time isn't generally useful. Your example also illustrates the common problem of loop + timeout + closing over the iteration variable. — RobH, May 09 '14 at 14:40
The code is alittle more complex than that. Ill post a snippet to give you a better picture — Ernie, May 09 '14 at 14:42
Can you post the for loop as well? Is `i` the variable you're iterating with? — RobH, May 09 '14 at 14:52
Do you want setInterval? `var i = 0; var func1 = setInterval(b, 5000); function b() { console.log(i++); if (i == 10) clearInterval(func1); }` — dcromley, May 09 '14 at 15:06

score 0 · Answer 1 · answered May 09 '14 at 14:59

0

The main problem here is that i is modified in b's closure before the timeout. It means that the 10 timeouts will be executed with i = 10.

You can use this pattern to fix it :

function a() {
    for(var i = 0 ; i < 10 ; i++) {
        (function(i) {
            function b() {
                //do something
            }
            setTimeout(b, 1000);
        })(i);
    }
}

answered May 09 '14 at 14:59

Sebastien C.

4,649
1
21
32

Good suggestion but in the context of the code dot think it would work – Ernie May 09 '14 at 15:07

function inside function not executing

1 Answers1