如何同時將同一功能應用於多個元素？

Question

我正在努力使代碼在多個元素中同時運行，而不是依次執行。

關於代碼功能的一些背景知識：

• 檢查元素以查看其是否包含文本。
• 檢查文本中的數字。
• 延遲幾秒鍾，具體取決於元素中的編號。
• 將文本移動到另一個元素，並清空包含文本的元素。

這段代碼逐個地貫穿每個元素。 我試圖使它運行，它同時執行。

 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> 

我希望首先執行最低的延遲，然后再執行第二最低的延遲，依此類推。 目前的實際結果是，首先完成第一個元素，然后完成第二個元素，然后是第3個，然后是第4個。

Answer 1

您已經快到了，您只需要刪除setTimeout回調內部的遞歸調用（該調用僅根據元素的順序而不是其時間延遲來鏈接元素），也請刪除break因為它使for循環變得無用，並且使用let在循環內聲明變量，這樣就不會出現此問題 （因此每個元素都有自己的延遲號，而所有元素的延遲號都不相同）：

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
   }
}

工作示例：

 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>