program story

JavaScript의 루프 타이머

inputbox 2020. 11. 3. 08:00
반응형

JavaScript의 루프 타이머


2000 밀리 초마다 JavaScript 코드를 실행해야합니다.

setTimeout('moveItem()',2000)

위는 2000 밀리 초 후에 함수를 실행하지만 다시 실행하지는 않습니다.

그래서 내 moveItem 함수 안에 다음이 있습니다.

function moveItem() {
    jQuery(".stripTransmitter ul li a").trigger('click');
    setInterval('moverItem()',2000);
}

이것은 트리거 클릭 jQuery 코드 조각을 2,000 밀리 초 간격으로 실행하기를 원하기 때문에 작동하지 않지만 지금은 항상 호출되고 있으며 스크립트를 중단해야합니다. 게다가 코딩 품질이 매우 나쁘다고 생각합니다. 어떻게 해결 하시겠습니까?


점에 유의 setTimeoutsetInterval매우 다른 기능은 다음과 같습니다

  • setTimeout시간 초과 후 코드를 한 번 실행합니다 .
  • setInterval제공된 시간 제한 간격으로 코드를 영원히 실행합니다 .

두 함수 모두 시간 초과를 중단하는 데 사용할 수 있는 타이머 ID반환합니다 . 당신이해야 할 일은 그 값을 변수에 저장하고 clearTimeout(tid)또는 clearInterval(tid)각각에 대한 인수로 사용하는 것 입니다.

따라서 수행하려는 작업에 따라 두 가지 유효한 선택이 있습니다.

// set timeout
var tid = setTimeout(mycode, 2000);
function mycode() {
  // do some stuff...
  tid = setTimeout(mycode, 2000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
  clearTimeout(tid);
}

또는

// set interval
var tid = setInterval(mycode, 2000);
function mycode() {
  // do some stuff...
  // no need to recall the function (it's an interval, it'll loop forever)
}
function abortTimer() { // to be called when you want to stop the timer
  clearInterval(tid);
}

둘 다 동일한 것을 달성하는 매우 일반적인 방법입니다.


setInterval(moveItem, 2000);

기능을 실행하는 방법은 2 초마다. 코드의 주요 문제 는 콜백 외부가 아닌 내부에서 호출 한다는 것입니다. 수행하려는 작업을 이해하면 다음을 사용할 수 있습니다.moveItemsetInterval

function moveItem() {
    jQuery('.stripTransmitter ul li a').trigger('click');
}

setInterval(moveItem, 2000);

NB : setTimeout또는 문자열을 전달하지 마십시오. setInterval가장 좋은 방법은 익명 함수 나 함수 식별자를 전달하는 것입니다 (위에서했던 것처럼). 또한 작은 따옴표와 큰 따옴표를 혼용하지 않도록주의하십시오. 하나를 골라서 고수하십시오.


나는 당신이 setInterval ()을 찾고 있다고 믿습니다.


그것은해야한다:

function moveItem() {
  jQuery(".stripTransmitter ul li a").trigger('click');
}
setInterval(moveItem,2000);

setInterval(f, t)밀리 초 f마다 한 번씩 인수 함수를 호출합니다 t.


여기에 html 코드가있는 자동 루프 기능이 있습니다. 누군가에게 유용 할 수 있기를 바랍니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<script>

function test() {
$(".block").animate({left: "+=50", opacity: 1}, 500 );
   setTimeout(mycode, 2000);
};
$( "#go" ).click(function(){
test();
});
</script>
</body>
</html>

바이올린 : 데모


다음과 같이 시도해야합니다.

 function update(){
    i++;
    document.getElementById('tekst').innerHTML = i;
    setInterval(update(),1000);
    }

즉, 필요한 작업을 수행하는 함수를 만들고 원하는 간격으로 자신을 호출하는지 확인해야합니다. 신체 온로드에서 다음과 같이 처음으로 함수를 호출하십시오.

<body onload="update()">

참고 URL : https://stackoverflow.com/questions/2133166/loop-timer-in-javascript

반응형