How to apply same function to multiple elements at the same time?

Question

I'm struggling on trying to make the code run at the same time in multiple elements rather than going through in order.

Bit of Background on what the code does:

Checks the elements to see if it contains a text.
Checks the number in the text.
Delays for a couple of seconds depending on the number in the element.
Moves, the text to another element and empties the element that contained the text.

This code runs through each element one by one but. im trying to make it run so, it does it at the same time.

function mover() {
  paras = Array.from(document.querySelectorAll('.working1'));
  jobelement = document.getElementById("jobend");
  for (const para of paras) {
    if (para.innerHTML) {
      machinetext = para.textContent;

      var words = machinetext.split(' ');
      var mySubString = words[3].substring(
        words[3].lastIndexOf(" ") + 1,
        words[3].lastIndexOf(",")
      );

      times = mySubString * 100;

      setTimeout(function() {
        jobelement.innerHTML = machinetext;
        console.log(mySubString);
        para.textContent = "";
        mover();
      }, times);
      break;
    }
  }
}
mover();

<p id="machine1" class="working1">Job No.78 (Cost, 62, C)</p>
<p id="machine2" class="working1">Job No.68 (Cost, 67, B)</p>
<p id="machine3" class="working1">Job No.68 (Cost, 93, A)</p>
<p id="machine4" class="working1">Job No.68 (Cost, 45, C)</p>
<p>------------------------------<p>
<p id="jobend" class="jobends"></p>

I expect the lowest delay to be done first, then the second lowest delay and so on. The actual results at the moment, is the first element is done first, then the second element, then 3rd then 4th.

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Robin Zigmond, Feb 17 '19 at 21:54
you're failing to declare most of your variables, thereby making them implicit globals - which is bad practice for all sorts of reasons. In particular, if you replace `times = ...` by `let times = ...` I believe this should work as you expect. Check the one I marked as a duplicate for the reasoning behind this. — Robin Zigmond, Feb 17 '19 at 21:55

score 0 · Accepted Answer · answered Feb 17 '19 at 21:55

You're nearly there, you just have to remove the recursive call inside the setTimeout callback (which just chains the elements depending on their order not on their times delay), remove the break too because it renders the for loop kind of useless, and use let to declare the variables inside the loop so you won't get this issue (so that each element will have its own delay number and not the same number for all elements):

for (const para of paras) {
   if (para.innerHTML) {
      machinetext = para.textContent;

      let words = machinetext.split(' ');
      let mySubString = words[3].substring(             // use let here (important)
         words[3].lastIndexOf(" ") + 1,
         words[3].lastIndexOf(",")
      );

      times = mySubString * 100;

      setTimeout(function() {
         jobelement.innerHTML = machinetext;
         console.log(mySubString);
         para.textContent = "";
                                                        // remove the recursive call to mover()
      }, times);
                                                        // remove break
   }
}

Working example:

function mover() {
  paras = Array.from(document.querySelectorAll('.working1'));
  jobelement = document.getElementById("jobend");
  for (const para of paras) {
    if (para.innerHTML) {
      machinetext = para.textContent;

      let words = machinetext.split(' ');
      let mySubString = words[3].substring(
        words[3].lastIndexOf(" ") + 1,
        words[3].lastIndexOf(",")
      );

      times = mySubString * 100;

      setTimeout(function() {
        jobelement.innerHTML = machinetext;
        console.log(mySubString);
        para.textContent = "";
      }, times);
    }
  }
}
mover();

<p id="machine1" class="working1">Job No.78 (Cost, 62, C)</p>
<p id="machine2" class="working1">Job No.68 (Cost, 67, B)</p>
<p id="machine3" class="working1">Job No.68 (Cost, 93, A)</p>
<p id="machine4" class="working1">Job No.68 (Cost, 45, C)</p>
<p>------------------------------<p>
<p id="jobend" class="jobends"></p>

How to apply same function to multiple elements at the same time?

1 Answers1