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

要每20秒执行5次操作并倒计时，请尝试按以下步骤设置间隔：

var MAX_GLOBAL_I = 50;
var GLOBAL_I = 0;
setInterval(doSomething, 20000);
doSomething();

function doSomething(){
	for(var i = 0; i < 5 && GLOBAL_I < MAX_GLOBAL_I; i++){
		console.log("i: " + i);
		console.log("GLOBAL_I: " + GLOBAL_I);
		console.log("----------");
		
		GLOBAL_I++;
	}
	if(GLOBAL_I < MAX_GLOBAL_I){
		runTimer(20);
	}
}

function runTimer(secs){
	logTime(secs);
	var timer = setInterval(function(){
		--secs == 0 ? clearInterval(timer) : logTime(secs);
	}, 1000);
}

function logTime(currentSecs){
	console.log(currentSecs);
}

Answer 2

您可以在下面使用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秒）下面的代码段来尝试此操作。

Answer 3

正如我的评论中所述，我将使用间隔来更新标签，并使用超时来处理5个元素。一旦处理了5个，我们将等待timeout毫秒，直到处理下一个5。请记住，间隔和超时并不精确。而且在视觉上更新计数器也需要时间。

如果您需要更多控制时间和/或希望将标签同步到刷新率，请查看requestAnimationFrame()和performance对象。

// setup
const elements = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ];
const label = document.querySelector( '#timer ');
const timeout = 5000;
// we need variables to track the timer and the element we're handling 
let timer = null;
let index = 0;
let length = elements.length;
// handle elements until 5 have been handled
// then set a timeout to handle the next 5 in ${const timeout} seconds
const handle_five = () => {
  const element = elements[ index ];
  if ( element !== undefined ) {
    // do something with the element
    console.log( 'handling element', element, ' at index ', index );
    index += 1;
    if ( index < length ) {
      if ( index % 5 === 0 ) {
        run_timer();
        setTimeout( handle_five, timeout );
        console.log( '--- finished 5 ---' );
      }
      else handle_five();
    }
  }
};
// if we are waiting 20 seconds, we render a timer
const run_timer = () => {
  let count = timeout / 1000;
  timer = setInterval(() => {
    label.innerHTML = count;
    count -= 1;
    if ( !count ) {
      clearInterval( timer );
      label.innerHTML = '';
    }
  }, 1000 );
};
// start handling the elements*/
handle_five();

<label id="timer"></label>

对于循环-计数，等待计数器，继续计数

3 个答案: