JavaScript를 사용하여 특정 지연 후 스크립트 실행

jQuery와 비슷한 JavaScript 메소드가 있습니까 ( delay()또는 wait()특정 시간 동안 스크립트 실행을 지연시키기 위해)?

다음이 있습니다 :

setTimeout(function, milliseconds);

함수가 실행 된 후 전달 될 수있는 함수.

창 setTimeout()방법을 참조하십시오 .

다른 사람들이 말한 것에 덧붙여서 setTimeout: 나중에 매개 변수가있는 함수를 호출하려면 익명의 함수 호출을 설정해야합니다.

나중에 호출하려면 함수를 인수로 전달해야합니다. 사실상 이것은 이름 뒤에 괄호가없는 것을 의미합니다. 다음은 한 번에 경고를 호출하고 'Hello world'를 표시합니다.

var a = "world";
setTimeout(alert("Hello " + a), 2000);

이 문제를 해결하려면 Flubba처럼 함수 이름을 입력하거나 익명 함수를 사용할 수 있습니다. 매개 변수를 전달해야하는 경우 익명 함수를 사용해야합니다.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

그러나 해당 코드를 실행하면 2 초 후에 팝업에 'Hello Stack Overflow'가 표시됩니다. 변수 a의 값이 2 초 동안 변경 되었기 때문입니다. 2 초 후에 'Hello world'라고 말하려면 다음 코드 스 니펫을 사용해야합니다.

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

2 초간 기다린 후 'Hello world'가 팝업됩니다.

조금만 확장하면 ... setTimeout호출 에서 직접 코드를 실행할 수 있지만 @patrick가 말한 것처럼 일반적으로 이와 같은 콜백 함수를 할당합니다. 시간은 밀리 초입니다

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

정말로 (동기화) 블로킹 (동기식) delay기능을 원한다면 다음과 같이하십시오.

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

setTimeout 을 사용 하고 콜백 함수를 전달해야합니다. 자바 스크립트에서 절전 모드를 사용할 수없는 이유는 전체 페이지가 그 동안 아무것도하지 못하도록 차단했기 때문입니다. 좋은 계획이 아닙니다. Javascript의 이벤트 모델을 사용하고 행복을 유지하십시오. 싸우지 마!

window.setInterval () 을 사용 하여 일정한 간격으로 일부 코드를 반복적으로 실행할 수도 있습니다 .

이전 의견을 추가하기 위해 다음과 같이 말하고 싶습니다.

setTimeout()JavaScript 의 함수는 스크립트 자체의 실행을 일시 중지하지 않고 단지 나중에 컴파일러에게 코드를 실행하도록 지시합니다.

JavaScript에 내장 된 실행을 실제로 일시 정지 할 수있는 기능은 없습니다. 그러나 함수를 사용하고 Date()필요한 시간 간격을 추가 하여 시간에 도달 할 때까지 무조건 루프와 같은 기능을 수행하는 고유 한 함수를 작성할 수 있습니다 .

지연 만 테스트해야하는 경우 다음을 사용할 수 있습니다.

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

그리고 2 초 동안 지연하려면 다음을 수행하십시오.

delay(2000);

그러나 생산에 최고는 아닐 수도 있습니다. 코멘트에서 그것에 더

왜 약속 뒤에 코드를 넣을 수 없습니까? (머리 꼭대기에서 입력)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

간단한 대답은 다음과 같습니다.

setTimeout(
    function () {
        x = 1;
    }, 1000);

위의 함수는 1 초 (1000ms) 동안 기다린 다음 x를 1로 설정합니다. 분명히 이것은 예입니다. 익명 함수 내에서 원하는 모든 작업을 수행 할 수 있습니다.

나는 전화를위한 세 가지 다른 방법으로 Maurius의 설명 (가장 높은 upvoted 응답)을 정말로 좋아했습니다 setTimeout.

내 코드에서 AJAX 저장 이벤트가 완료되면 자동으로 이전 페이지로 자동 탐색하려고합니다. 저장 이벤트가 완료되면 CSS에 약간의 애니메이션이 표시되어 저장이 완료되었음을 나타냅니다.

내 코드에서 처음 두 예제 사이의 차이점을 발견했습니다.

setTimeout(window.history.back(), 3000);

이것은 타임 아웃을 기다리지 않습니다-back ()은 지연을 위해 어떤 숫자를 입력하든 거의 즉시 호출됩니다.

그러나 이것을 다음으로 변경하십시오.

setTimeout(function() {window.history.back()}, 3000);

이것은 내가 바랐던 것을 정확하게합니다.

이것은 back () 작업에만 국한된 것이 아니며에서도 마찬가지입니다 alert(). 기본적으로 alert()첫 번째 경우에 사용 된 지연 시간은 무시됩니다. 팝업을 닫으면 CSS의 애니메이션이 계속됩니다.

따라서 내장 함수를 사용하고 인수를 사용하지 않더라도 그가 설명하는 두 번째 또는 세 번째 방법을 권장합니다.

나는 중간에 지연을 가지고 실행하려는 일부 아약스 명령을 가지고있었습니다. 한 가지 방법으로 간단한 예를 들어 보겠습니다. 나는 비 전통적인 접근 방식을 위해 파쇄 될 준비가되어 있습니다. :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

코드 블록을 복사하여 콘솔 창에 붙여 넣고 다음과 같은 것을 볼 수 있습니다.

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

지연으로 함수를 호출하는 가장 간단한 솔루션은 다음과 같습니다.

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

지연 기능 :

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

async함수 내부 사용법 :

await delay(1000);

다른 말로, setTimeout이 가장 안전한 방법
이지만 때로는 논리를 새로운 함수로 분리 할 수없는 경우 Date.now ()를 사용하여 밀리 초를 얻고 지연을 직접 수행 할 수 있습니다 ....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click OK....');
delay(5000);
alert('# Im back # date:' +new Date());