Làm cách nào để xóa setInterval này trong một hàm?

Thông thường, tôi sẽ đặt khoảng thời gian thành một biến và sau đó xóa nó như thế nào var the_int = setInterval(); clearInterval(the_int);nhưng để mã của tôi hoạt động, tôi đặt nó vào một hàm ẩn danh:

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

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

intervalTrigger();

Làm thế nào để tôi xóa điều này? Tôi đã cho nó một phát súng và cố gắng var test = intervalTrigger(); clearInterval(test);chắc chắn, nhưng điều đó không hiệu quả.

Về cơ bản, tôi cần điều này để ngừng kích hoạt khi Google Map của tôi được nhấp, ví dụ:

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

Các setIntervalphương thức trả về một xử lý mà bạn có thể sử dụng để xóa các khoảng thời gian. Nếu bạn muốn hàm trả về nó, bạn chỉ cần trả về kết quả của lệnh gọi phương thức:

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

Sau đó để xóa khoảng:

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

Cách đơn giản nhất tôi có thể nghĩ ra: thêm một lớp.

Chỉ cần thêm một lớp (trên bất kỳ phần tử nào) và kiểm tra bên trong khoảng nếu nó ở đó. Điều này đáng tin cậy, tùy biến và ngôn ngữ chéo hơn bất kỳ cách nào khác, tôi tin.

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>