[JQUERY] 자바 스크립트에서 시간 지연을 설정하는 방법

자바 스크립트에서 시간 지연을 설정하는 방법

해결법

1. ---

   1.사용의 setTimeout () :

   사용의 setTimeout () :

   var delayInMilliseconds = 1000; //1 second
   
   setTimeout(function() {
     //your code to be executed after 1 second
   }, delayInMilliseconds);
   

   당신의 setTimeout없이 수행 할 경우이 질문을 참조하십시오.

2. ---

   2.

   setTimeout(function(){
   
   
   }, 500); 
   

   } {의 코드의 내부 배치

   500 = 0.5 초

   2.2 초 = 2,200

   기타

3. ---

   3.ES-6 솔루션

   ES-6 솔루션

   다음은 실제 지연을 가지고 비동기 / await를 사용하는 샘플 코드입니다.

   이 많은 제약이 있고이 유용하지 않을 수도 있지만, 그냥 재미 여기를 게시 ..

   지연 함수 (delayInms) { 반환 새로운 약속 (해결 => { 에서는 setTimeout (() => { 해결 (2); } delayInms); }); } 비동기 함수 샘플 () { CONSOLE.LOG ( "A"); 을 console.log ( '대기 ...') delayres = await를 지연 (3000)하자; CONSOLE.LOG ( 'B'); } 견본();

4. ---

   4.타이머 기능 두 가지 (주로 사용) 유형에있다 자바 스크립트의 setTimeout과 setInterval을 (기타)

   타이머 기능 두 가지 (주로 사용) 유형에있다 자바 스크립트의 setTimeout과 setInterval을 (기타)

   이 두 방법은 동일한 서명을해야합니다. 그들은 매개 변수로 호출 백 기능과 지연 시간을 걸릴.

   setInterval을 모든 지연 milisecs 후 콜백 함수 호출에 반해 유지의 setTimeout 지연 후에 한번만 실행한다.

   이 두 가지 방법은 타이머가 만료되기 전에 그들을 취소하는 데 사용할 수있는 정수 식별자를 반환한다.

   사항 clearTimeout 위해 clearInterval 및이 두 방법은 상술 한 기능과의 setTimeout하여 setInterval에서 리턴 정수 식별자를 가지고

   예:

   에서는 setTimeout

   alert("before setTimeout");
   
   setTimeout(function(){
           alert("I am setTimeout");
      },1000); //delay is in milliseconds 
   
     alert("after setTimeout");
   

   당신은 위의 코드를 실행하면 당신은의 setTimeout 전에 경고 다음의 setTimeout 마침내 내가 1 초 (1000ms)으로 깜박임 이후의 setTimeout 오전 경고 후 것을 볼 수 있습니다

   당신이 예에서 알 수있는 것은에서는 setTimeout은 (...)는 다음 문 즉 경고에 가기 전에 경과 얻을 타이머 기다리지 않습니다 의미하는 비동기라는 것이다 ( "에서는 setTimeout 후");

   예:

   setInterval을

   alert("before setInterval"); //called first
   
    var tid = setInterval(function(){
           //called 5 times each time after one second  
         //before getting cleared by below timeout. 
           alert("I am setInterval");
      },1000); //delay is in milliseconds 
   
     alert("after setInterval"); //called second
   
   setTimeout(function(){
        clearInterval(tid); //clear above interval after 5 seconds
   },5000);
   

   당신은 위의 코드를 실행하는 경우의 setTimeout 5 초 또는 다른 두 번째는 경고를 얻을 것이다마다 1 일 이후에 타이머를 클리어하기 때문에 당신은 setInterval을하기 전에 경고 있고 setInterval을 마침내 내가 1 초 (1000ms)으로 깜박임 후 setInterval을 5 번입니다 경고 후 후 볼 수 있습니다 나는 setInterval을 무한입니다.

   어떻게 브라우저는 내부적으로 그합니까?

   나는 간략하게 설명합니다.

   당신은 자바 스크립트 이벤트 큐에 대해 알고있는 것을 이해합니다. 브라우저에서 구현 된 이벤트 큐가있다. 이벤트가 JS 트리거받을 때마다,이 모든 이벤트는이 큐에 추가됩니다 (같은 등 클릭). 브라우저는 큐에서 이벤트를 받아 그들에게 하나 하나를 실행 실행 아무 상관이없는 경우.

   지금, 당신은의 setTimeout 또는 setInterval을 콜백을 호출 할 때 브라우저에있는 타이머에 등록 얻을 주어진 시간이 만료 결국 자바 스크립트 큐 및 실행하는 그것에서 이벤트를 취 후에는 이벤트 큐에 추가됩니다.

   자바 스크립트 엔진은 단일 스레드이며, 그들이 한 번에 한 가지를 실행할 수 있기 때문에, 이렇게 발생합니다. 그래서, 그들은 다른 자바 스크립트를 실행하고 타이머를 추적 할 수 없습니다. 이 타이머는 브라우저에 등록하는 이유는 (브라우저가 단일 스레드되지 않습니다) 그리고 타이머를 추적하고 타이머가 만료 된 후 큐에서 이벤트를 추가 할 수 있습니다.

   같은 단지 그것을 삭제됩니다 또는 브라우저 페이지를 새로 고침 할 때까지 이벤트가 지정된 시간 후에 또 다시 큐에 추가됩니다이 경우 setInterval을 위해 발생합니다.

   따라서, 콜백 언젠가 다른 코드 블록 스레드와 그것을 대기열에있어 어떤 프로세스 시간을 포기하지 않을 때 특별하게 호출 할 더 지정된 지연 시간보다 더 걸릴 수 있습니다.

   내가 언급 한 바와 같이 그리고 자바 스크립트는 단일 스레드입니다. 그래서, 당신은 오랫동안 스레드를 차단합니다.

   이 코드처럼

   while(true) { //infinite loop 
   }
   

   사용자는 메시지 말 페이지가 응답하지 발생할 수 있습니다.

5. ---

   5.동기 호출을 위해 당신은 방법을 아래에 사용할 수 있습니다 :

   동기 호출을 위해 당신은 방법을 아래에 사용할 수 있습니다 :

   function sleep(milliseconds) {
     var start = new Date().getTime();
     for (var i = 0; i < 1e7; i++) {
       if ((new Date().getTime() - start) > milliseconds){
         break;
       }
     }
   }
   

6. ---

   6.새로 고칠 필요가 있다면, 이것은 또 다른 가능성은 다음과 같습니다

   새로 고칠 필요가 있다면, 이것은 또 다른 가능성은 다음과 같습니다

   setTimeout(function () { 
       $("#jsSegurosProductos").jsGrid("refresh"); 
   }, 1000);
   

7. ---

   7.여기에 내가이 문제를 해결하기 위해 뭘 오전입니다. 나는이 때문에 타이밍 문제 동의하고 코드를 실행할 수있는 일시 정지를 필요로했다.

   여기에 내가이 문제를 해결하기 위해 뭘 오전입니다. 나는이 때문에 타이밍 문제 동의하고 코드를 실행할 수있는 일시 정지를 필요로했다.

   var delayInMilliseconds = 1000; 
   setTimeout(function() {
    //add your code here to execute
    }, delayInMilliseconds);
   

   이 새로운 코드는 1 초 동안 일시 중지하고 그 사이에 코드를 실행합니다.

8. ---

   8.그것은 나를 메신저 일을 이해하는 데 도움이 때문에 나는 내 입력을 줄 것이다.

   그것은 나를 메신저 일을 이해하는 데 도움이 때문에 나는 내 입력을 줄 것이다.

   나는 다음을 한 3 초 대기를 가지고 슬라이드 쇼를 스크롤 자동차를 만들려면 :

   var isPlaying = true;
   
   function autoPlay(playing){
      var delayTime = 3000;
      var timeIncrement = 3000;
   
      if(playing){
           for(var i=0; i<6; i++){//I have 6 images
               setTimeout(nextImage, delayTime);
               delayTime += timeIncrement;
           }
           isPlaying = false;
   
      }else{
          alert("auto play off");
      }
   }
   
   autoPlay(isPlaying);
   

   그 실행의 setTimeout ()를 같은 기억; 동시에 실행될 그들이에서는 setTimeout (nextImage, delayTime)에서 그 가정 것처럼 함수에서 모든 시간을 할 것이다 지연 시간은 정적 3000 밀리 초이다.

   내가 이것에 대한 계정에 한 일은 / 추가 3000 밀리를 추가했다 delayTime + = timeIncrement ;. 통해 루프 점진 각 후이야

   여기에 관심이있는 사람들을 위해 내 nextImage ()가 모습입니다 :

   function nextImage(){
       if(currentImg === 1){//change to img 2
           for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[1].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[1];
           imgDescription.innerHTML = imgDescText[1];
   
           currentImg = 2;
       }
       else if(currentImg === 2){//change to img 3
           for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[2].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[2];
           imgDescription.innerHTML = imgDescText[2];
   
           currentImg = 3;
       }
       else if(currentImg === 3){//change to img 4
           for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[3].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[3];
           imgDescription.innerHTML = imgDescText[3];
   
           currentImg = 4;
       }
       else if(currentImg === 4){//change to img 5
           for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[4].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[4];
           imgDescription.innerHTML = imgDescText[4];
   
           currentImg = 5;
       }
       else if(currentImg === 5){//change to img 6
       for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[5].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[5];
           imgDescription.innerHTML = imgDescText[5];
   
           currentImg = 6;
       }
       else if(currentImg === 6){//change to img 1
           for(var i=0; i<6; i++){
               images[i].style.zIndex = "0";
           }
           images[0].style.zIndex = "1";
           imgNumber.innerHTML = imageNumber_Text[0];
           imgDescription.innerHTML = imgDescText[0];
   
           currentImg = 1;
       }
   }
   

from https://stackoverflow.com/questions/17883692/how-to-set-time-delay-in-javascript by cc-by-sa and MIT license