clearInterval() trong JavaScript

clearInterval() trong JavaScript

Anh NguyễnLeave a comment

Đị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().

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình

Cú pháp

clearInterval(var)
Code language: JavaScript (javascript)

Trong đó:

Tham sốMô tả
varBắ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)
GIF guay genial cool - animated GIF on GIFER - by Agamazar

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:

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.

Bình luận