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

이미지를 전환하기 위해 웹 사이트에 js가 있지만 이미지를 두 번 클릭하면 지연이 필요합니다. 지연은 1000ms 여야합니다. 따라서 img.jpg를 클릭하면 img_onclick.jpg가 나타납니다. 그런 다음 img_onclick.jpg 이미지를 클릭하면 img.jpg가 다시 표시되기 전에 1000ms의 지연이 있어야합니다.

코드는 다음과 같습니다.

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});

사용 setTimeout():

var delayInMilliseconds = 1000; //1 second

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

없이 수행하려면 다음을 수행 setTimeout하십시오 . 이 질문을 참조하십시오 .

setTimeout(function(){


}, 500); 

내부에 코드를 배치하십시오 { }

500 = 0.5 초

2200 = 2.2 초

기타

ES-6 솔루션

다음은 실제 지연 을 위해 aync / await 를 사용하는 샘플 코드입니다 .

많은 제약이 있으며 유용하지 않을 수 있지만 재미를 위해 여기에 게시하십시오 ..

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

자바 스크립트에는 두 가지 (주로 사용되는) 타이머 함수 유형이 setTimeout있으며 setInterval( other )

이 두 가지 방법 모두 동일한 서명이 있습니다. 콜백 기능과 지연 시간을 매개 변수로 사용합니다.

setTimeout 지연 후 한 번만 실행 setInterval 모든 지연 밀리 초 후에는 콜백 함수를 계속 호출합니다.

이 두 가지 방법 모두 타이머가 만료되기 전에 지우는 데 사용할 수있는 정수 식별자를 반환합니다.

clearTimeout그리고 clearInterval이 두 방법은 상기 함수로부터 정수 리턴 식별자 걸릴 setTimeout및setInterval

예:

setTimeout

alert("before setTimeout");

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

  alert("after setTimeout");

당신은 위의 코드를 실행하면 당신은 경고 것을 볼 수 before setTimeout후 after setTimeout마침내는 경고 I am setTimeout1 초 (1000ms)으로 깜박임 후

예제에서 알 수있는 setTimeout(...)것은 비동기입니다. 즉, 다음 명령문으로 가기 전에 타이머가 경과 할 때까지 기다리지 않습니다.alert("after 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);

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

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

간단히 설명하겠습니다.

Javascript의 이벤트 큐에 대해 알아야한다는 것을 이해하려면. 브라우저에 구현 된 이벤트 큐가 있습니다. 이벤트가 js에서 트리거 될 때마다 이러한 모든 이벤트 (예 : click 등)가이 큐에 추가됩니다. 브라우저가 실행할 것이 없으면 대기열에서 이벤트를 가져 와서 하나씩 실행합니다.

이제 전화를 걸 setTimeout거나setInterval 콜백이 브라우저의 타이머에 등록되고 주어진 시간이 만료 된 후 이벤트 대기열에 추가되고 결국 javascript는 대기열에서 이벤트를 가져 와서 실행합니다.

이것은 자바 스크립트 엔진이 단일 스레드이기 때문에 한 번에 하나만 실행할 수 있기 때문에 발생합니다. 따라서 다른 자바 스크립트를 실행하고 타이머를 추적 할 수 없습니다. 그렇기 때문에 이러한 타이머가 브라우저에 등록되어 있고 (브라우저는 단일 스레드가 아님) 타이머가 만료 된 후에 타이머를 추적하고 큐에 이벤트를 추가 할 수 있습니다.

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

노트

이 함수에 전달하는 지연 매개 변수는 콜백을 실행하는 최소 지연 시간입니다. 타이머가 만료 된 후 브라우저가 자바 스크립트 엔진이 실행할 큐에 이벤트를 추가하지만 콜백 실행은 큐의 이벤트 위치에 따라 다르며 엔진이 단일 스레드이므로 모든 이벤트를 실행하기 때문입니다. 대기열을 하나씩.

따라서 다른 코드가 스레드를 차단하고 대기열에있는 것을 처리 할 시간을주지 않으면 특별히 호출하는 데 콜백이 지정된 지연 시간보다 오래 걸릴 수 있습니다.

그리고 내가 언급했듯이 자바 스크립트는 단일 스레드입니다. 따라서 스레드를 오랫동안 막 으면

이 코드처럼

while(true) { //infinite loop 
}

사용자에게 페이지가 응답하지 않는다는 메시지가 표시 될 수 있습니다 .

동기화 통화의 경우 아래 방법을 사용할 수 있습니다.

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

새로 고침이 필요한 경우 이는 또 다른 가능성입니다.

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

이 문제를 해결하기 위해 내가하고있는 일은 다음과 같습니다. 타이밍 문제로 인해 코드 실행을 일시 중지해야한다는 데 동의합니다.

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

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

나는 내가하는 일을 이해하는 데 도움이되기 때문에 입력을 줄 것이다.

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