Add delay in object loop

Question

Hi I am stuck in simple problem. I need to add some delay in object loop i tried setTimeout but it's not working. Below is my current code

Code

$.each(calanderData, function(key, valueObj) {
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, 3000);
});

Check https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — J. Almandos, Nov 22 '18 at 12:06
@J. Almandos already checked that...but i can't figure how to use that with an object — sam999, Nov 22 '18 at 12:08
Can you explain what you're trying to do in more detail - other than "add delay in loop". Are you trying to add a delay between *each* iteration of the loop? — freedomn-m, Nov 22 '18 at 12:10
This is the same problem the suggested (https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) - but the (excessively IMO) upvoted answers are just way too complicated. A simple `3000*loopiteration` is all that's needed (as essentially in this accepted answer). — freedomn-m, Nov 22 '18 at 13:56

score 1 · Accepted Answer · edited Nov 22 '18 at 13:53

Check this solution:

calanderData = {
  'id1': 1,
  'Cover': 2,
  'id2': 3,
  'id3': 4,
}

var step = 3000;
var timeout = 0;
$.each(calanderData, function(key, valueObj) {
  setTimeout(function() {
    if (key == 'Cover') {
      col = 12;
    } else {
      col = 6;
    }

    preview = 'https://via.placeholder.com/150';

    $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');
  }, timeout);

  timeout += step;
});

#calander-preview-modal div {
  width: 100px !important;
  float: left !important;
  margin-left: 10px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="calander-preview-modal"></div>

Thank u so much this is what i needed have a great day :) – sam999 Nov 22 '18 at 12:27 — sam999, Nov 22 '18 at 12:27

score 0 · Answer 2 · answered Nov 22 '18 at 12:30

You have mistake in logic of your programm

That will make it work with delays, but will create errors with wrong values:

var numberCounterEach = 0;
$.each(calanderData, function(key, valueObj) {
    numberCounterEach++;
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, numberCounterEach*3000);
});

So you need to implement function closure:

function delayedActionExecute(delay, key, valueObj) {
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, delay);
}

var numberCounterEach = 0;
$.each(calanderData, function(key, valueObj) {
    numberCounterEach++;
    delayedActionExecute(numberCounterEach*3000, key, valueObj);
});

But you surely will need to fix more errors of variables's scopes: like global col and not visible inner variables

score 0 · Answer 3 · answered Nov 22 '18 at 12:37

This is my solution:

let calendarData = {
  key1: 1,
  key2: 2
};

let i = 0;

(function loop() {
  setTimeout(function() {
    //your logic here
    i++;
    if(i < Object.keys(calendarData).length) {
      loop();
    }
  },3000);
})();

JSFiddle: https://jsfiddle.net/tdv5j67f/23/

Add delay in object loop

3 Answers3