HomeLập trìnhJavaScriptJavaScript setTimeout() –...

JavaScript setTimeout() – JS Timer để trì hoãn N giây


Bạn đã bao giờ tự hỏi liệu có phương pháp nào để trì hoãn mã JavaScript của bạn trong vài giây không?

Trong bài viết này, tôi sẽ giải thích những gì setTimeout() phương pháp là với các ví dụ về mã và cách nó khác với setInterval().

Là gì setTimeout() trong JavaScript?

setTimeout() là một phương thức sẽ thực thi một đoạn mã sau khi bộ đếm thời gian chạy xong.

Đây là cú pháp cho setTimeout() phương pháp.

let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);

Hãy chia nhỏ cú pháp.

Chức năng

setTimeout() sẽ đặt hẹn giờ và khi hết giờ, chức năng sẽ chạy.

Độ trễ tính bằng mili giây

Bên trong phương thức này, bạn có thể chỉ định số mili giây mà bạn muốn chức năng trì hoãn. 1.000 mili giây bằng 1 giây.

Trong ví dụ này, thông báo sẽ xuất hiện trên màn hình sau 3 giây. (3.000 mili giây)

const para = document.getElementById("para");

function myMessage() {
  para.innerHTML = "I just appeared";
  console.log("message appeared");
}
setTimeout(myMessage, 3000);

Nếu độ trễ không xuất hiện trong setTimeout() thì nó được đặt thành 0 và thông báo sẽ xuất hiện ngay lập tức.

const para = document.getElementById("para");

function myMessage() {
  para.innerHTML = "No delay in this message";
  console.log("message appeared immediately");
}
setTimeout(myMessage);

Tranh luận

Bạn cũng có thể có các đối số tùy chọn được truyền vào hàm.

Trong cuộc trò chuyện ví dụ này, Britney sẽ đặt một câu hỏi và câu trả lời của Ashley sẽ bị trễ 3 giây. Nó sẽ bao gồm hai đối số tùy chọn từ lunchMenu chức năng.

Đọc thêm  Cómo imprimir en la consola en JS
const ashley = document.getElementById("ashley");

function lunchMenu(food1, food2) {
  ashley.innerHTML = `<strong>Ashley: </strong>I had ${food1} and ${food2}.`;
}

setTimeout(lunchMenu, 3000, "pizza", "salad");

ID thời gian chờ

setTimeout() sẽ trả lại timeoutID đó là một số nguyên dương và ID duy nhất cho bộ đếm thời gian.

ClearTimeout()

Phương pháp này được sử dụng để hủy bỏ một setTimeout(). Bên trong phương thức bạn phải tham khảo timeoutID.

Đây là cú pháp cơ bản.

clearTimeout(timeoutID)

Trong ví dụ này, thông báo sẽ xuất hiện sau độ trễ 10 giây (10.000 mili giây). Nhưng nếu người dùng nhấp vào Stop Timer nút, sau đó setTimeout() sẽ bị hủy bỏ.

const timerMsg = document.getElementById("message1");
const stopBtn = document.getElementById("stop");

function timerMessage() {
  timerMsg.innerHTML = "Thanks for waiting!";
}

let timeoutID = setTimeout(timerMessage, 10000);

stopBtn.addEventListener("click", () => {
  clearTimeout(timeoutID);
  timerMsg.innerHTML = "Timer was stopped";
});

Bạn có nên chuyển một chuỗi thay vì một hàm cho setTimeout() không?

Việc chuyển vào một chuỗi thay vì một hàm được coi là một thông lệ không tốt và có nguy cơ bảo mật.

Tránh viết setTimeout() như thế này:

setTimeout("console.log('Do not do this');", 1000);

Một số trình chỉnh sửa mã sẽ cảnh báo bạn và đề xuất sử dụng một hàm để thay thế.

Screen-Shot-2021-08-26-at-3.32.04-AM

Luôn sử dụng hàm thay vì chuỗi trong trường hợp này.

setTimeout(function () {
  console.log("Do this instead");
}, 1000);

Nếu bạn muốn tìm hiểu thêm về các rủi ro bảo mật đối với một đánh giá ngụ ý, vui lòng đọc về nó trong phần tài liệu MDN trên Never Use Eval.

làm thế nào setInterval() khác với setTimeout()?

không giống setTimeout() mà thực thi một chức năng chỉ một lần sau khi trì hoãn, setInterval() sẽ lặp lại một chức năng sau mỗi số giây đã đặt. Nếu bạn muốn dừng lại setInterval()sau đó bạn sử dụng clearInterval().

Cú pháp cho setInterval() giống như setTimeout().

let intervalID = setInterval(function, delay in milliseconds, argument1, argument2,...);

Trong ví dụ này, chúng tôi có một thông báo bán hàng đang được in ra màn hình mỗi giây.

Đọc thêm  JavaScript Tạo đối tượng – Cách xác định đối tượng trong JS
let intervalID = setInterval(() => {
  salesMsg.innerHTML += "<p>Sale ends soon. BUY NOW!</p>";
}, 1000);

Bên trong setTimeout() phương pháp, chúng tôi sử dụng clearInterval() để ngừng in tin nhắn sau 10 giây.

setTimeout(() => {
  clearInterval(intervalID);
}, 10000);

Cũng giống như với setTimeout()bạn phải sử dụng ID duy nhất cho bộ hẹn giờ bên trong clearInterval() phương pháp.

Ví dụ dự án thực tế

Bây giờ chúng ta đã hiểu làm thế nào setTimeout()setInterval() làm việc, chúng ta hãy xem một ví dụ về cách nó có thể áp dụng cho một tính năng thực tế trên một trang web.

Trong ví dụ này, chúng tôi có một thanh tiến trình sẽ bắt đầu 2 giây sau khi tải trang. Bên trong setTimeout()chúng ta có một setInterval() điều đó sẽ thực hiện animate() miễn là chiều rộng của thanh không phải là 100%.

setTimeout(() => {
  let intervalID = setInterval(() => {
    if (barWidth === 100) {
      clearInterval(intervalID);
    } else {
      animate();
    }
  }, 100);//this sets the speed of the animation
}, 2000);

Bên trong animate() chức năng, chúng tôi có một chức năng khác setTimeout() sẽ hiển thị Hoàn thành 100% khi thanh tiến trình đầy.

const animate = () => {
  barWidth++;
  progressBar.style.width = `${barWidth}%`;
  setTimeout(() => {
    loadingMsg.innerHTML = `${barWidth}% Completed`;
  }, 10100);
};

Thanh tiến trình chỉ là một trong nhiều hoạt ảnh bạn có thể tạo bằng setTimeout()setInterval(). Bạn cũng có thể sử dụng các phương pháp này khi xây dựng trò chơi trực tuyến.

Trong How to Build A Simon Game của Beau Carnes, bạn có thể thấy cách setTimeout()setInterval() được sử dụng trong logic trò chơi.

Đọc thêm  JavaScript 数组完全手册

Phần kết luận

setTimeout() là một phương thức sẽ thực thi một đoạn mã sau khi bộ đếm thời gian chạy xong.

let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);

Độ trễ được đặt bằng mili giây và 1.000 mili giây bằng 1 giây.

Nếu sự chậm trễ được bỏ qua từ setTimeout() thì độ trễ được đặt thành 0 và hàm sẽ thực thi.

Bạn cũng có thể có các đối số tùy chọn được truyền vào hàm.

setTimeout() sẽ trả lại timeoutID đó là một số nguyên dương và ID duy nhất cho bộ đếm thời gian.

Điều quan trọng là không sử dụng chuỗi thay cho hàm vì lý do bảo mật.

setTimeout("console.log('Do not do this');", 1000);

Nếu bạn muốn hủy bỏ setTimeout() sau đó bạn cần phải sử dụng clearTimeout()

clearTimeout(timeoutID)

Nếu bạn muốn lặp lại việc thực thi một đoạn mã trong một khoảng thời gian nhất định thì bạn sẽ sử dụng setInterval().

let intervalID = setInterval(() => {
 // this code runs every second
}, 1000);

setTimeout() có thể được sử dụng để xây dựng hoạt hình JavaScript cơ bản và trò chơi trực tuyến.

Tôi hy vọng bạn thích bài viết này trên setTimeout().



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status