clearInterval() trong JavaScript

Định nghĩa

Phương thức clearInterval() được sử dụng để xóa nhiệm vụ mà ta đã thiết lập trong phương thức setInterval().

Cú pháp

clearInterval(var)
Code language: JavaScript (javascript)

Trong đó:

Tham số	Mô tả
var	Bắt buộc. Tên của biến để truyền vào phương thức clearInterval()

Ta phải đặt phương thức setInterval() trong một biến để truyền vào phương thức clearInterval() thì mới có thể thực thi được.

myVar = setInterval("javascript function", milliseconds);

clearInterval(myVar);
Code language: JavaScript (javascript)

Ví dụ

Ví dụ 1: Hiển thị thời gian hiện tại giống như đồng hồ kỹ thuật số và sử dụng clearInterval() để dừng thời gian

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}
Code language: JavaScript (javascript)

Ví dụ 2: Chuyển đổi giữa hai màu nền cứ sau 300 mili giây một lần, cho đến khi nó dừng lại bởi clearInterval()

var myVar = setInterval(setColor, 300);

function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
  clearInterval(myVar);
}
Code language: JavaScript (javascript)

Ví dụ 3: Sử dụng setInterval() và clearInterval() để tạo thanh Progress bar (tiến trình) động

function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
Code language: JavaScript (javascript)

Kết luận

Như vậy, phương thức setInterval() sẽ thực thi hàm lặp đi lặp lại cho đến khi phương thức clearInterval() được gọi hoặc cửa sổ bị đóng (tải lại trang). Phương thức clearInterval() sẽ xóa nhiệm vụ mà ta đã thiết lập trong phương thức setInterval().

Xem thêm:

• setInterval() trong JavaScript
• setTimeout() trong JavaScript
• clearTimeout() trong JavaScript

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.