code

함수 내부에서 이 setInterval을 지우려면 어떻게 해야 합니까?

starcafe 2023. 10. 10. 20:46
반응형

함수 내부에서 이 setInterval을 지우려면 어떻게 해야 합니까?

보통은 그 간격을 변수로 설정한 다음에 다음과 같이 지웁니다.var the_int = setInterval(); clearInterval(the_int);하지만 제 코드가 작동하기 위해서 익명 기능으로 입력했습니다.

function intervalTrigger() {
  setInterval(function() {
    if (timedCount >= markers.length) {
      timedCount = 0;
    }

    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000);
};

intervalTrigger();

이걸 어떻게 지우죠?한번 시도해보고 해봤습니다.var test = intervalTrigger(); clearInterval(test);확실히, 하지만 그건 효과가 없었어요.

기본적으로 Google Map을 클릭하면 트리거가 중지됩니다. 예를 들어 필요합니다.

google.maps.event.addListener(map, "click", function() {
  //stop timer
});

setIntervalmethod는 구간을 지우기 위해 사용할 수 있는 핸들을 반환합니다.함수가 반환되도록 하려면 메소드 호출의 결과만 반환하면 됩니다.

function intervalTrigger() {
  return window.setInterval( function() {
    if (timedCount >= markers.length) {
       timedCount = 0;
    }
    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000 );
};
var id = intervalTrigger();

그런 다음 간격을 지웁니다.

window.clearInterval(id);
// Initiate set interval and assign it to intervalListener
var intervalListener = self.setInterval(function () {someProcess()}, 1000);
function someProcess() {
  console.log('someProcess() has been called');
  // If some condition is true clear the interval
  if (stopIntervalIsTrue) {
    window.clearInterval(intervalListener);
  }
}
the_int=window.clearInterval(the_int);

내가 생각할 수 있는 가장 간단한 방법은 클래스를 추가하는 것입니다.

(어떤 요소에서든) 클래스를 추가하고 간격이 있는지 확인하기만 하면 됩니다.이것은 다른 어떤 방법보다도 신뢰할 수 있고, 사용자 정의가 가능하며, 상호 언어를 초월할 수 있다고 생각합니다.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});
body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}
<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause/unpause</button></p>

언급URL : https://stackoverflow.com/questions/2901108/how-do-i-clear-this-setinterval-inside-a-function

반응형