javascript에서 지연 시간 설정 방법

javascript에서 지연 시간 설정 방법

제 웹사이트에는 이미지를 바꾸기 위한 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();
    });
});

사용방법:

var delayInMilliseconds = 1000; //1 second

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

없이 하고 싶다면setTimeout: 이 질문을 참조해 주세요.

setTimeout(function(){


}, 500); 

를 ★★★★★★★★★에 넣습니다.{ }

5000= 0.5초

22002= 2.2초

기타.

ES-6 솔루션

다음은 aync/ait를 사용하여 실제 지연을 발생시키는 샘플 코드입니다.

많은 제약이 있어 도움이 되지 않을 수도 있지만, 재미삼아 여기에 글을 올립니다.

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();

당신은 그 약속을 사용할 수 있다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

이 방법을 사용합니다.

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });

또는

console.log("Hello");
await sleep(2000);
console.log("World!");

javascript에는 2종류의 .setTimeout ★★★★★★★★★★★★★★★★★」setInterval(기타)

두 방식 모두 시그니처가 동일합니다.콜백 함수와 지연 시간을 파라미터로 합니다.

setTimeout됩니다.setInterval는 지연 밀리세크가 발생할 때마다 콜백 함수를 계속 호출합니다.

두 방식 모두 타이머가 만료되기 전에 클리어하기 위해 사용할 수 있는 정수 ID를 반환합니다.

clearTimeout ★★★★★★★★★★★★★★★★★」clearInterval 모두 의 함수에서 합니다.setTimeout ★★★★★★★★★★★★★★★★★」setInterval

예를 들어:

set 타임아웃

alert("before setTimeout");

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

  alert("after setTimeout");

위의 코드를 실행하면 경고가 표시되고 마지막으로 1초(1000ms) 후에 경보가 표시됩니다.

알 수 은 '그러다' 입니다.setTimeout(...)않고 , 비동기이다, 비동기이다.alert("after setTimeout");

예를 들어:

set Interval

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

위의 코드를 실행하면 경보가 발생하고 마지막으로 1초(1000ms) 후에5번 경보가 울립니다.set Timeout은 5초 후에 타이머를 클리어하거나 1초마다1번씩 클리어하기 때문입니다.

브라우저는 내부적으로 어떤 역할을 합니까?

간단히 설명하겠습니다.

javascript에서 이벤트 큐에 대해 알아야 합니다.브라우저에 이벤트큐가 실장되어 있습니다.js에서 이벤트가 트리거될 때마다 이러한 모든 이벤트(클릭 등)가 발생합니다.)가 이 큐에 추가됩니다.브라우저는 실행할 것이 없으면 큐에서 이벤트를 가져와 하나씩 실행합니다.

,에 하면 신에 전화하면 신에 전화하면setTimeout ★★★★★★★★★★★★★★★★★」setInterval콜백은 브라우저의 타이머에 등록되고 지정된 시간이 경과한 후 이벤트큐에 추가되며 최종적으로 javascript가 큐에서 이벤트를 가져와 실행합니다.

이는 javascript 엔진이 싱글 스레드이기 때문에 한번에 1개만 실행할 수 있기 때문입니다.그래서 그들은 다른 javascript를 실행할 수 없고 당신의 타이머를 추적할 수 없습니다.따라서 이러한 타이머는 브라우저에 등록되며(브라우저는 단일 스레드가 아닙니다), 타이머가 만료된 후 타이머를 추적하여 큐에 이벤트를 추가할 수 있습니다.

일이 setInterval이 경우에만 지정된 간격 후에 이벤트가 삭제되거나 브라우저 페이지가 새로 고쳐질 때까지 이벤트가 큐에 계속 추가됩니다.

메모

이러한 함수에 전달하는 지연 파라미터가 콜백을 실행하기 위한 최소 지연시간입니다.이는 타이머가 만료된 후 브라우저는 이벤트를 Javascript 엔진에 의해 실행되는 큐에 추가하지만 콜백의 실행은 큐 내의 이벤트 위치에 따라 달라지며 엔진이 싱글스레드화되면 큐 내의 모든 이벤트가 하나씩 실행되기 때문입니다.

따라서 다른 코드가 스레드를 차단하여 큐에 있는 것을 처리할 시간이 없을 경우 콜백이 지정된 지연 시간보다 더 오래 걸릴 수 있습니다.

그리고 javascript는 싱글 스레드입니다.그래서 실을 오래 막으면.

이 코드처럼

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

저는 이 문제를 해결하기 위해 이렇게 하고 있습니다.타이밍 문제 때문에 코드를 실행하기 위해 일시 정지가 필요하기 때문에 동의 합니다.

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

이 새로운 코드는 1초간 일시 정지한 후 코드를 실행합니다.

새로고침이 필요한 경우 다음 사항을 고려하십시오.

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

제가 뭘 하고 있는지 이해하는데 도움이 되므로 의견을 드리겠습니다.

자동 스크롤 슬라이드 쇼를 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;.

여기에 관심을 가지고 계신 분들을 위해 제 next Image()는 다음과 같습니다.

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

const delay = ( delayInms ) = > new Promise ( resolve = > setTimeout ( resolve , delayInms ); 지연을 기다립니다(100)

JS 도메인 전문가는 아니지만 setTimeout()과 다음과 같은 재귀 함수를 사용하여 이 문제에 대한 해결 방법을 찾았습니다.

i=0; //you should set i as a global variable
function recFunc() {
    i++;
    if (i == 1) {
        //do job1
    } else if (i == 2) {
        //do job2
    } else if (i == 3) {
        //do job3
    }
    if (i < 3) { //we have 3 distinct jobs. so the condition is (j < 3)
        setTimeout(function () {
            recFunc();
        }, 2000); //replace 2000 with desired delay
    }
}
//
//
//
recfunc(); //start the process

언급URL : https://stackoverflow.com/questions/17883692/how-to-set-time-delay-in-javascript