Dừng cuộc gọi setInterval trong JavaScript

Tôi đang sử dụng setInterval(fname, 10000);để gọi một chức năng cứ sau 10 giây bằng JavaScript. Có thể ngừng gọi nó trên một số sự kiện?

Tôi muốn người dùng có thể dừng việc làm mới dữ liệu lặp đi lặp lại.

setInterval()trả về một ID khoảng thời gian mà bạn có thể chuyển đến clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Xem các tài liệu cho setInterval()và clearInterval().

Nếu bạn đặt giá trị trả về của setIntervalmột biến, bạn có thể sử dụng clearIntervalđể dừng nó.

var myTimer = setInterval(...);
clearInterval(myTimer);

Bạn có thể đặt một biến mới và tăng nó lên bằng ++ (đếm một) mỗi khi nó chạy, sau đó tôi sử dụng một câu lệnh có điều kiện để kết thúc nó:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Tôi hy vọng rằng nó sẽ giúp và nó là đúng.

Các câu trả lời ở trên đã giải thích cách setInterval trả về một điều khiển và cách xử lý này được sử dụng để hủy bộ đếm thời gian Interval.

Một số cân nhắc về kiến ​​trúc:

Vui lòng không sử dụng các biến "không có phạm vi". Cách an toàn nhất là sử dụng thuộc tính của đối tượng DOM. Nơi dễ nhất sẽ là "tài liệu". Nếu quá trình làm mới được bắt đầu bằng nút start / stop, bạn có thể sử dụng chính nút đó:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

Vì chức năng được xác định bên trong trình xử lý nhấp vào nút, bạn không phải xác định lại. Bộ hẹn giờ có thể được nối lại nếu nút được nhấp lại.

Đã trả lời ... Nhưng nếu bạn cần một tính năng, tái sử dụng timer mà còn hỗ trợ nhiều tác vụ trên khoảng cách khác nhau, bạn có thể sử dụng của tôi TaskTimer (đối với Node và trình duyệt).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

Trong trường hợp của bạn, khi người dùng nhấp để làm phiền dữ liệu - làm mới; bạn cũng có thể gọi timer.pause()sau đó timer.resume()nếu họ cần kích hoạt lại.

Xem thêm tại đây .

Phương thức clearInterval () có thể được sử dụng để xóa bộ định thời gian với phương thức setInterval ().

setInterval luôn trả về giá trị ID. Giá trị này có thể được truyền vào ClearInterval () để dừng bộ hẹn giờ. Dưới đây là một ví dụ về bộ đếm thời gian bắt đầu từ 30 và dừng khi nó trở thành 0.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

@cnu,

Bạn có thể dừng khoảng thời gian, khi thử chạy mã trước khi xem trình duyệt bảng điều khiển của bạn (F12) ... hãy thử nhận xét ClearInterval (trình kích hoạt) là tìm lại giao diện điều khiển, không phải trình làm đẹp? : P

Kiểm tra ví dụ một nguồn:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);

<div id="sandroalvares" style="background: gold; width:200px;">Author</div>

Khai báo biến để gán giá trị được trả về từ setInterval (...) và chuyển biến được gán cho clearInterval ();

ví dụ

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// Bất cứ nơi nào bạn truy cập vào bộ đếm thời gian được khai báo ở trên, hãy gọi ClearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

Bạn cũng có thể dừng khoảng thời gian bằng cách thêm một trình lắng nghe sự kiện để giả sử một nút có ID "stop-distance":

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

Lưu ý: Khoảng thời gian sẽ vẫn được thực hiện, mặc dù không có gì sẽ xảy ra.

Đây là cách tôi sử dụng phương thức clearInterval () để dừng bộ hẹn giờ sau 10 giây.

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}

<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>

Sử dụng setTimeOut để dừng khoảng thời gian sau một thời gian.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

Tôi đoán đoạn mã sau sẽ giúp:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Bạn đã làm đúng mã 100% ... Vậy ... Có vấn đề gì vậy? Hoặc đó là một hướng dẫn ...

Tại sao không sử dụng một cách tiếp cận đơn giản hơn? Thêm một lớp học!

Đơn giản chỉ cần thêm một lớp cho biết khoảng thời gian không làm gì cả. Ví dụ: trên di chuột.

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</button></p>

Tôi đã tìm kiếm cách tiếp cận nhanh chóng và dễ dàng này từ lâu, vì vậy tôi sẽ đăng một số phiên bản để giới thiệu càng nhiều người càng tốt.