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

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

jQuery와 ?delay()또는wait()(특정 시간 동안 스크립트 실행 지연)?

다른 모든 사람들이 말한 것에 덧붙이자면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(function, milliseconds);

함수가 실행될 때까지의 시간을 초과할 수 있습니다.

창 방법을 참조하십시오.

조금만 더 확장하면,에서 직접 코드를 실행할 수 있습니다.setTimeout호출, 그러나 @dll이 말했듯이, 당신은 보통 이렇게 콜백 함수를 할당합니다.시간은 밀리초입니다.

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

창을 사용할 수도 있습니다.Interval()을 설정하여 일부 코드를 정기적으로 반복 실행합니다.

앞서 언급한 내용을 덧붙이자면, 저는 다음과 같이 말하고 싶습니다.

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

자바스크립트에 내장된 실행을 실제로 일시 중지할 수 있는 기능은 없습니다.하지만, 당신은 시간이 도달할 때까지 무조건적인 루프와 같은 것을 하는 당신만의 함수를 쓸 수 있습니다.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의 설명(가장 높은 투표 응답)이 정말 좋았습니다.setTimeout.

내 코드에서는 AJAX 저장 이벤트가 완료되면 이전 페이지로 자동 이동합니다.저장 이벤트가 완료되면 CSS에 저장이 성공했음을 나타내는 약간의 애니메이션이 표시됩니다.

코드에서 처음 두 예 사이의 차이를 발견했습니다.

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

이것은 시간 초과를 기다리지 않습니다. 지연을 위해 어떤 번호를 입력하든 back()은 거의 즉시 호출됩니다.

그러나 이 값을 다음으로 변경:

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

이게 바로 제가 바라던 바와 같습니다.

이는 후방() 작동에 국한되지 않으며, 동일한 현상이 발생합니다.alert()기본적으로.alert()첫 번째 경우에 사용되며, 지연 시간은 무시됩니다.팝업을 해제하면 CSS용 애니메이션이 계속됩니다.

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

지연 함수:

/**
 * 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);

또는

delay(1000).then(() => {
   // your code...
});

또는 기능이 없는 경우

new Promise(r => setTimeout(r, 1000)).then(() => {
   // your code ...
});
// or
await new Promise(r => setTimeout(r, 1000));
// your code...

다른 말처럼 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());

중간에 실행하고 싶은 Ajax 명령이 몇 개 있었습니다.여기 그것을 하는 한 가지 방법의 간단한 예가 있습니다.하지만 저는 저의 파격적인 접근법 때문에 갈기갈기 찢길 준비가 되어 있습니다. :)

//  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);
}

언급URL : https://stackoverflow.com/questions/24849/execute-script-after-specific-delay-using-javascript