简体   繁体   中英

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

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.

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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM