인덱스 / 반복 수에 따라 For 루프에서 간격 시간을 동적으로 변경하는 방법은 무엇입니까?

12

댓글을 달 수 없으므로이 게시물을 작성해야합니다. 정확히 1 초 또는 1000 밀리 초를 지연 / 대기하는 아래 코드가 있습니다.

let n = 5;
for (let i=1; i<n; i++)
{
  setTimeout( function timer()
  {
      console.log("hello world");
  }, i*1000 );
}

스 니펫 확장

그러나 고정 1000 밀리 초 대신 i * 1000 초 지연시킬 수 있으므로 대기는 반복 횟수에 따라 달라 집니까?

예를 들어, n = 5 인 경우 첫 번째 반복에서 1 초의 루프 지연을 원합니다. 2 초간 2 초간 반복됩니다. 최종 지연 시간은 5 초입니다.

javascript wait

— 마이크
소스

2

9 개의 타이머를 만들고 싶습니까? 그렇다면 코드가 원하는 것을 수행합니다. 정확히 3 초 동안 기다리지 않습니다. 실제로 타이머는 절대 정확하지 않습니다.

— Scott Marcus

1

귀하의 질문은 이해가되지 않습니다

— DanStarns

2

: 그냥 codepen에 코드를 시도 codepen.io/Connum/pen/BaaBMwW 즉 당신이 원하는 아니라면 (이처럼하지만 귀하의 질문에서이하는 소리), 무엇을 의도 한 결과 지정하십시오 - 당신은 떨어져 9 메시지 3000ms를 얻을 수 입니다.

— Constantin Groß

1

setTimeout의 작동 방식을 이해하지 못하는 것 같습니다 . "지연" 이 아닙니다 . 3000을 이미 곱 했기 때문에 3 초 간격으로 경고를 받고 i있습니다. 그렇게하지 않으면 모든 경고를 동시에 받게 됩니다.

— 04FS

3

마지막 문장을 굵게 표시하기 위해 질문을 편집해도 실제로는 도움이되지 않습니다. 여러 주석가들에 의해 귀하의 코드가 이미 원하는 것을 수행한다고 말합니다 (또는 의도 한 결과가 아닌 경우 실제로 요청하는 것이 확실하지 않습니다).

— Constantin Groß

6

여기에 바로 1 초 후, 2 초 후, 3 초 후 등을 표시하는 기능이 있습니다. 특별한 수학이나 약속이 필요하지 않습니다.

const n = 5;
let cnt=0;

function show() {
  console.log("call "+cnt,"delay: ",cnt,"sec");
  cnt++;
  if (cnt > n) return; // we are done
  setTimeout(show, cnt*1000 ); // cnt seconds later
}
show()

스 니펫 확장

— mplungjan
소스

1

나는 당신의 대답을 놓친 것에 대해 유감스럽게 생각합니다. 너무 많은 의견들, 오해, 대답들이있었습니다 ... 어쨌든 당신의 시간을 내 주셔서 감사했던 것을 해결 한 첫 번째 사람 이었으므로 당신의 대답을 선택하고 있습니다.

— Mike

@ 마이크 롤. 다른 솔루션은 자신의 권리를 유용하므로 동의를 주셔서 감사합니다

— mplungjan

Pavan은 ES6 구문에서 동일합니다. 읽기 어렵지만 실제로는 동일합니다. 내가 :) 내 쓴 그의 편집은 그렇게 같은 시간에 만들어졌다 만들려면

— mplungjan

8

이 작업은 약속, 반응 흐름 및 기타 멋진 도구 (아직 아무도 작업자를 사용하도록 제안하지 않았습니다!)로 해결할 수 있지만 약간의 산술로 해결할 수도 있습니다.

따라서 1s, 이전 one + 2s, 이전 one + 3s 등의 시퀀스 시간 초과를 원합니다. 이 순서는 1, 3, 6, 10, 15 ...이며 공식은 a[n] = n * (n + 1) / 2입니다. 그것을 아는 것은...

let n = 6;
console.log(new Date().getSeconds());

for (let i = 1; i < n; i++) {
  setTimeout(function timer() {
    console.log(new Date().getSeconds());
  }, 1000 * i * (i + 1) / 2);
}

스 니펫 확장

— mbojko
소스

수학자들은 여전히 살아있다! :)

— Bilal Siddiqui

5

async / await (Promises)를 사용하여 코드를 직렬화 할 수 있습니다.

const waitSeconds = seconds => new Promise(resolve => setTimeout(resolve, seconds))

async function main () {
 let oldDate = new Date()
 let newDate
 
 /* 
  * If you put 'await' inside the loop you can synchronize the async code, and simulate
  * a sleep function
  */
 for (let i=1; i<5; i++) {
    await waitSeconds(i*1000)
    newDate = new Date()   
    console.log(`Loop for i=${i}, elapsed=${moment(newDate).diff(oldDate, 'seconds')} seconds`)
    oldDate = newDate
 }
 
 console.log('End')
}

main()

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

스 니펫 확장

— 마우로 스테파노 스키
소스

5

질문 xD를 해독하는 데 시간이 걸렸지 만 이것이 당신이 원하는 것입니까?

매번 i * 1000 지연으로 console.log 를 계속 실행 합니다. 따라서 처음에는 1 초 길이 (1 * 1000)가되고 다음에는 2 초가됩니다.

let i = 0;
loop = () => {
  setTimeout(() => {
    console.log(new Date()); // for clarity
    i++;
    if (i < 10) {
      loop();
    }
  }, i * 1000)
};
loop();

스 니펫 확장

— 파반 스킵 보
소스

예를 들어, n = 5 인 경우 첫 번째 반복에서 1 초의 루프 지연을 원합니다. 2 초간 2 초간 반복됩니다. 최종 지연 시간은 5 초입니다.

— Mike

p 이것은 첫 번째 반복을 위해 1 초, 두 번째를 위해 2 초 등을 지연시킬 것입니다.

— Pavan Skipo

설명이 코드와 일치하지 않습니다. 그러나 작업 수행

— mplungjan

3

루프는 타임 아웃 기능이 완료되기를 기다리지 않습니다. 따라서 루프가 실행될 때 각 인덱스에 대한 경고를 예약합니다.

인덱스에 따라 실행되지만 동시에 예약 된 기능을 사용할 수 있습니다. 3 초의 차이를 느낄 수 있습니다.

function test(i){
    setTimeout( function timer(){
        console.log("hello world" + i);
    }, i*3000);
}
for (let i=1; i<4; i++) {
   test(i);
}

— 빌랄 시드 디키
소스

3

for 루프 대신 재귀 호출을 사용하십시오.

let i=1;
function a(i) {
  if (i > 5)
    return
  else
    b("message", i)
}

function b(s, f) {
  setTimeout(function timer() {
    console.log(s + " " + f + " seconds");
  }, f * 1000);
  a(++i);
}
a(i);

스 니펫 확장

— 생략
소스

예를 들어, n = 5 인 경우 첫 번째 반복에서 1 초의 루프 지연을 원합니다. 2 초간 2 초간 반복됩니다. 최종 지연 시간은 5 초입니다.

— Mike