javascript/jquery loop execute function after every iteration

Question

var dagaData = ['Manok', 'Pusa', 'Daga', 'Ibon', 'Aso'];
$('#clicktest').on('click', function() {
    $.each(dagaData, function(index, item) {
        executeData(item);

        alert(item);
    });
});

function executeData(item) {
    var items = $("<div></div>").text(item);
    $('#pangtest').append(items);
}

Is it possible to execute the function on every iteration?

Right now when I run the code above it finished all iteration before the append happen.

That why I've put alert to see if every alert append each iteration.

Output of code above: alert('Manok'), alert('Pusa') ,alert('Daga'), alert('Ibon'), alert('Aso') executed append.

What I'm trying to achieve is alert('manok') append, alert('Pusa') append, alert('Daga') append, alert('Ibon') append, alert('Aso') append.

Thanks in advance.

Not sure what you're talking about, as it seems to work as expected: jsfiddle.net/396vj1mk. — Quangdao Nguyen
– Quangdao Nguyen, Commented Oct 14, 2016 at 2:22
@QuangdaoNguyen why is it working on you, but on mine it doesn't, — Joel Enanod Jr
– Joel Enanod Jr, Commented Oct 14, 2016 at 2:25
My bad. Should have tested cross-browser. It works on Firefox, but as @nnnnnn pointed out, some browsers do things differently. — Quangdao Nguyen
– Quangdao Nguyen, Commented Oct 14, 2016 at 2:28
@QuangdaoNguyen yeah my bad too, I opened your jsfiddle on firefox when I'm trying my code on Chrome. — Joel Enanod Jr
– Joel Enanod Jr, Commented Oct 14, 2016 at 2:30

Community · Accepted Answer · 2017-05-23 12:00:43Z

In a general sense, although the DOM is updated each time you call .append() the browser won't actually repaint the screen until after the entire JS function finishes. (Though some browsers will repaint at the point when an alert is open, which is why using alert() for debugging is a bad idea: it can subtly change the behaviour in a way that calling console.log() doesn't.)

You can work around this by using a setTimeout-based pseudo-loop - in between timeouts the browser then gets a chance to repaint:

var dagaData = ['Manok', 'Pusa', 'Daga', 'Ibon', 'Aso'];

$('#clicktest').on('click', function() {
  var i = 0;  
  (function doNext() {
    var item = dagaData[i];
    executeData(item);
    alert(item);
    if (++i < dagaData.length)
      setTimeout(doNext, 5);
  })();
});

function executeData(item) {
    var items = $("<div></div>").text(item);
    $('#pangtest').append(items);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clicktest">Test</button>
<div id="pangtest"></div>

Or just use your original $.each() loop with the contents of the loop wrapped in a timeout, as per Bnrdo's answer. But I prefer to wait to schedule each timeout only after the previous one is done because that way the order of execution is guaranteed.

Bnrdo · Accepted Answer · 2016-10-14 02:20:01Z

2

Wrap them in setTimeout

$.each(dagaData, function(index, item) {
   setTimeout(function() {
      executeData(item);

      alert(item);
   }, 1);
});

answered Oct 14, 2016 at 2:20

Bnrdo

5,4743 gold badges40 silver badges64 bronze badges

1 Comment

nnnnnn Over a year ago

This is certainly a lot neater than my solution, so I've voted it up, but note that doing it like this doesn't guarantee that the updates will occur strictly in array index order.

Collectives™ on Stack Overflow

javascript/jquery loop execute function after every iteration

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related