javascript - for循环-计数，等待计数器，继续计数

Question

for循环是遍历所有元素，然后调用另一个函数。

示例: for 循环应该调用该函数 5 次，然后等待 20 秒，然后调用接下来的 5 个元素。直到所有元素都被调用一次。在这 20 秒内，计数器应显示在处理接下来的 5 个元素之前还剩多少秒。

function myCounter(counter) {
  var interval = setInterval(function() {
      counter--;
    sec = Math.floor(counter % 60);  
    min = Math.floor(counter/60);

    sec = (sec < 10)?'0'+sec:sec;
    min = (min < 10)?'0'+min:min;

      $('#counter').html(min+':'+sec);
      if (counter == 0) {
          clearInterval(interval);
          return counter;
      }
  }, 1000);
}

var x = 1;
for (i=0; i<=50; i++){

  // if x < 5 then the next 5 elements
  // call the external function
  $('.check').html(i);

	//if x > 4 show the counter and wait to 0
  if(x > 5){
    myCounter(20);
    x=0;
  }
  x++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p id="counter"></p>
<p id="msg">Mache was <span class="check"></span></p>

Answer 1

您可以通过 Promise 使用类似下面的示例。

const sleep = (elements, sleepTime, callback) => {
  let secs = sleepTime / 1000;
  let i = 0;
  let counter = 5;
  let elms = elements.splice(0, counter);
  if (elms.length <= 5) {
    counter = elms.length;
  }
  return new Promise((resolve) => {
    while (i < counter) {
      if (elms[i] !== undefined) {
        console.log("this is element: " + elms[i]);
      }
      i++;
      if (i == counter) {
        let logger = setInterval(() => {
          console.log("waiting for " + secs + " seconds");
          secs--;
          if (secs == 0) {
            clearInterval(logger);
            if (elements.length == 0) {
              if(typeof callback == "function") {
                  callback();
              } 
              resolve(true);
            } else {
              sleep(elements, sleepTime, callback);
            }
          }
        }, 1000);
      }
    }
  });
}

用法

const chel = [...]; // your elements are here
const onFinish = () => {
    alert("...finished!");
}
alert("Starting...!");
sleep(chel, 20000, onFinish); // or sleep(chel, 20000);

您可以通过运行下面的代码片段来试试这个(sleepTime 设置为 5 秒)。

const sleep = (elements, sleepTime, callback) => {
  let secs = sleepTime / 1000;
  let i = 0;
  let counter = 5;
  let elms = elements.splice(0, counter);
  if (elms.length <= 5) {
    counter = elms.length;
  }
  return new Promise((resolve) => {
    while (i < counter) {
      if (elms[i] !== undefined) {
        console.log("this is element: " + elms[i]);
      }
      i++;
      if (i == counter) {
        let logger = setInterval(() => {
          console.log("waiting for " + secs + " seconds");
          secs--;
          if (secs == 0) {
            clearInterval(logger);
            if (elements.length == 0) {
              if (typeof callback == "function") {
                callback();
              }
              resolve(true);
            } else {
              sleep(elements, sleepTime, callback);
            }
          }
        }, 1000);
      }
    }
  });
}
const chel = ["H - Hydrogen", "He - Helium", "Li - Lithium", "Be - Beryllium", "B - Boron", "C - Carbon", "N - Nitrogen", "O - Oxygen", "F - Fluorine", "Ne - Neon", "Na - Sodium", "Mg - Magnesium", "Al - Aluminium", "Si - Silicon", "P - Phosphorus", "S - Sulfur", "Cl - Chlorine", "Ar - Argon", "K - Potassium", "Ca - Calcium", "Sc - Scandium", "Ti - Titanium", "V - Vanadium", "Cr - Chromium", "Mn - Manganese", "Fe - Iron", "Co - Cobalt", "Ni - Nickel", "Cu - Copper", "Zn - Zinc", "Ga - Gallium", "Ge - Germanium", "As - Arsenic", "Se - Selenium", "Br - Bromine", "Kr - Krypton", "Rb - Rubidium", "Sr - Strontium", "Y - Yttrium", "Zr - Zirconium", "Nb - Niobium", "Mo - Molybdenum", "Tc - Technetium", "Ru - Ruthenium", "Rh - Rhodium", "Pd - Palladium", "Ag - Silver", "Cd - Cadmium", "In - Indium", "Sn - Tin", "Sb - Antimony", "Te - Tellurium", "I - Iodine", "Xe - Xenon", "Cs - Caesium", "Ba - Barium", "La - Lanthanum", "Ce - Cerium", "Pr - Praseodymium", "Nd - Neodymium", "Pm - Promethium", "Sm - Samarium", "Eu - Europium", "Gd - Gadolinium", "Tb - Terbium", "Dy - Dysprosium", "Ho - Holmium", "Er - Erbium", "Tm - Thulium", "Yb - Ytterbium", "Lu - Lutetium", "Hf - Hafnium", "Ta - Tantalum", "W - Tungsten", "Re - Rhenium", "Os - Osmium", "Ir - Iridium", "Pt - Platinum", "Au - Gold", "Hg - Mercury", "Tl - Thallium", "Pb - Lead", "Bi - Bismuth", "Po - Polonium", "At - Astatine", "Rn - Radon", "Fr - Francium", "Ra - Radium", "Ac - Actinium", "Th - Thorium", "Pa - Protactinium", "U - Uranium", "Np - Neptunium", "Pu - Plutonium", "Am - Americium", "Cm - Curium", "Bk - Berkelium", "Cf - Californium", "Es - Einsteinium", "Fm - Fermium", "Md - Mendelevium", "No - Nobelium", "Lr - Lawrencium", "Rf - Rutherfordium", "Db - Dubnium", "Sg - Seaborgium", "Bh - Bohrium", "Hs - Hassium", "Mt - Meitnerium", "Ds - Darmstadtium", "Rg - Roentgenium", "Cn - Copernicium", "Nh - Nihonium", "Fl - Flerovium", "Mc - Moscovium", "Lv - Livermorium", "Ts - Tennessine", "Og - Oganesson"];


const onFinish = () => {
  alert("...finished!");
}
alert("Starting...!");
sleep(chel, 5000, onFinish);