Sự khác nhau giữa setinterval và settimeout

Trong bài hướng dẫn tự học Lập trình JavaScript này bạn sẽ được học về các bộ hẹn giờ [Timer functions]

Bộ hẹn giờ trong JavaScript

1. Bộ hẹn giờ là gì?

Bộ hẹn giờ [Timer] là một chức năng cho phép chúng ta thực hiện một chức năng tại một thời điểm cụ thể.

Sử dụng bộ hẹn giờ, bạn có thể trì hoãn việc thực thi code để nó không hoàn thành vào đúng thời điểm một sự kiện được kích hoạt hoặc khi trang được tải.

Ví dụ: Bạn có thể sử dụng bộ hẹn giờ để thay đổi các biểu ngữ quảng cáo trên trang web của mình theo khoảng thời gian đều đặn hoặc hiển thị đồng hồ thời gian thực, v.v.

Có hai hàm hẹn giờ trong JavaScript: setTimeout[] và setInterval[].

Phần tiếp sau đây sẽ hướng dẫn bạn cách tạo bộ hẹn giờ để trì hoãn việc thực thi codecũng như cách thực hiện lặp lại một hoặc nhiều hành động bằng cách sử dụng các hàm này trong JavaScript.

2. Thực thi code sau khi trì hoãn một thời gian với setTimout trong JavaScript

Hàm setTimeout[] trong JavaScript được sử dụng để thực thi một hàm hoặc đoạn mã được chỉ định chỉ một lần sau một khoảng thời gian nhất định.

Cú pháp cơ bản của setTimeout là:

setTimeout[function, milliseconds]

Hàm này chấp nhận hai tham số:

    + Một hàm: Là hàm để thực thi

    + Một tham số tùy chọn để chỉ định độ trễ, là số mili giây thể hiện lượng thời gian chờ trước khi thực thi hàm [1 giây = 1000 mili giây].

Hãy xem cách nó hoạt động như thế nào qua ví dụ sau:

function myFunction[] { alert['Hello World!']; } Click thử ngay!

Ví dụ trên sẽ hiển thị thông báo cảnh báo sau 3 giây khi click vào nút.

Lưu ý: Nếu tham số trễ bị bỏ qua hoặc không được chỉ định, giá trị 0 [mặc định] sẽ được sử dụng, điều đó có nghĩa là hàm đã chỉ định được thực thi 'ngay lập tức' hoặc càng sớm càng tốt.

3. Thực thi code sau khoảng thời gian đều đặn với setInterval trong JavaScript

Tương tự, bạn có thể sử dụng hàm setInterval[] để thực thi một hàm hoặc đoạn mã được chỉ định lặp đi lặp lại vào những khoảng thời gian cố định.

Cú pháp cơ bản của setInterval là:

setInterval[function, milliseconds]

Hàm này cũng chấp nhận hai tham số:

    + Một hàm, là hàm để thực thi

    + Khoảng thời gian, là số mili giây biểu thị lượng thời gian chờ trước khi thực thi hàm [1 giây = 1000 mili giây].

Đây là một ví dụ:

function showTime[] { var d = new Date[]; document.getElementById["time"].innerHTML = d.toLocaleTimeString[]; } setInterval[showTime, 1000];

Thời gian hiện tại [tính theo máy tính của bạn là]:

Ví dụ trên sẽ thực thi hàm showTime[] lặp lại sau 1 giây.

Chức năng này sẽ lấy thời gian hiện tại trên máy tính của bạn và hiển thị trên trình duyệt.

4. Phương pháp dừng thực thi code hoặc hủy hẹn giờ

Cả hai phương thức setTimeout[] và setInterval[] đều trả về một ID duy nhất [một giá trị nguyên dương, được gọi là timer identifier] xác định bộ hẹn giờ được tạo bởi các phương thức này.

Sau khi có ID này, bạn có thể được sử dụng để tắt hoặc xóa bộ đếm thời gian và dừng việc thực thi mã trước đó.

Xóa bộ đếm thời gian có thể được thực hiện bằng cách sử dụng hai hàm: clearTimeout[] và clearInterval[].

Hãy xem ví dụ xóa việc thực thi hàm setTimout[]:

var timeoutID; function delayedAlert[] { timeoutID = setTimeout[showAlert, 3000]; } function showAlert[] { alert['Hàm setTimeout[] được thực thi.']; } function clearAlert[] { clearTimeout[timeoutID]; } Hiển thị thông báo sau 3s Xóa thực thi hàm setTimeout

Tương tự, phương thức clearInterval[] được sử dụng để xóa hoặc vô hiệu hóa bộ hẹn giờ setInterval[].

var intervalID; function showTime[] { var d = new Date[]; document.getElementById["time"].innerHTML = d.toLocaleTimeString[]; } var intervalID = setInterval[showTime, 1000]; function stopClock[] { clearInterval[intervalID]; }

Thời gian hiện tại [tính theo máy tính của bạn là]:

Tạm dừng

Lưu ý: Về mặt kỹ thuật, bạn có thể sử dụng thay thế clearTimeout[] cho clearInterval[]. Tuy nhiên, để đảm bảo tính rõ ràng và khả năng bảo trì, bạn nên tránh làm như vậy.

Như vậy là qua bài viết này, bạn đã biết cách sử dụng bộ hẹn giờ trong JavaScript thông qua hai phương thức setTimeout[] và setInterval[].

Cũng đơn giản thôi phải không?

Nhưng chỉ với 2 phương thức này, bạn có thể tạo ra nhiều chương trình thú vị cho ứng dụng của mình đấy.

Note: Nếu bạn đang quan tâm đến lập trình web thì tham khảo ngay KHÓA HỌC LẬP TRÌNH WEB [Full Stack]. Học trong 12 tháng - Học chắc tay - Hành nghề ngay!

• Tìm hiểu BOM – Window Navigator trong Javascript
• Tìm hiểu BOM – Screen trong Javascript
• Tìm hiểu chuỗi [string] trong Javascript
• Tổng hợp các hàm xử lý chuỗi trong Javascript

Tìm hiểu hàm setTimeout[] và setInterval[] trong JavaScript, cách sử dụng hàm clearTimeout[] và clearInterval[] trong Javascript và sự khác biệt của nó.

Nội dung bài học

1. Hàm setTimeout[] trong Javascript

2. Hàm setInterval[] trong Javascript

Lời kết

Tóm lại sự khác nhau giữa hàm setTimeout[] và setInterval[] chính là đối với hàm setTimeout[] thì số lần thực hiện là 1 lần còn đối với setInterval[] thì số lần thực hiện sẽ là mãi mãi cho tới khi bạn sử dụng hàm clearInterval[] để can thiệp vào. Tùy từng việc bạn sử dụng thì bạn chọn hàm nào cho hợp lý. Bạn nên lưu ý sự khác nhau giữa chúng.

 

Bài 36: SetTimeout[] và setInterval[] trong Javascript

Bài viết nằm trong case Study Hướng dẫn Javascript cơ bản và nâng cao 

—oOo— 

Bài 35: Javascript là gì?

Học lập trình web

Bài 37: Hàm alert[] – confirm[] – prompt[]

Tag: Tim hieu ham setTimeout va setInterval trong JavaScript, cach su dung ham clearTimeout va clearInterval trong Javascript va su khac biet cua no. Huong dan hoc Javascript , Hoc Javascript truc tuyen , Tu hoc Javascript , Video huong dan hoc Javascript , download tai lieu hoc Javascript , hoc Javascript mien phi , hoc Javascript online , hoc Javascript truc tuyen , hoc Javascript co ban , hoc Javascript nang cao , tai lieu hoc Javascript , Ebook hoc Javascript , hoc Javascript can ban , sach hoc javascript , học lập trình javascript.

Trong bài này chúng ta tìm hiểu hai hàm thường dùng để xử lý thời gian đó là setTimeout[] và setInterval[], hai hàm này có chung một đặc điểm là thiết lập vàthực hiện một nhiệm vụ nào đó trong một khoảng thời gian nào đó, số lần thực hiện có thể được lặp đi lặp lại hoặc không.Tuy vậy giữa hai hàm cũng có sự khác nhau về số lần lặp và chi tiết thế nào thì các bạn xem các phần dưới đây.Bạn đang xem: Settimeout javascript là gì

1. Hàm setTimeout[] trong Javascript

Hàm setTimeout[] dùng để thiết lập một khoảng thời gian nào đó sẽ thực hiện một nhiệm vụ nào đó và nó chỉ thực hiện đúng một lần.

Bạn đang xem: Settimeout javascript là gì

Trang chủ Công nghệ thông tin Hàm setTimeout[] và setInterval[] trong Javascript

Đôi khi có một số hành chúng chúng ta không muốn thực hiện ngay lập tức, mà muốn chúng sẽ được thực hiện ở một khoảng thời gian nhất định. Ví dụ sau 10 giây kể từ khi người dùng truy cập trang web chẳng hạn. Để làm được điều này thì JavaScript có hàm hỗ trợ chúng ta làm điều đó. Trong bài viết này tôi sẽ giới thiệu về setTimeout[] và setInterval[] trong JavaScript. Hãy cùng nhau tìm hiểu nhé.

• setTimeout cho phép chúng ta chạy một function một lần sau khoảng thời gian nhất định.
• setInterval cho phép chúng ta chạy một function lặp đi lặp lại, bắt đầu sau một khoảng thời gian, sau đó lặp lại liên tục trong khoảng thời gian đó.

Các phương thức này không phải là một phần của đặc tả JavaScript. Nhưng hầu hết các môi trường đều có bộ lên lịch nội bộ và cung cấp các hàm này. Đặc biệt, chúng được hỗ trợ trên tất cả các trình duyệt và Node.js.

Hàm setTimeout trong JavaScript

Cú pháp:

let timerId = setTimeout[func|code, [delay], [arg1], [arg2], ...]

Trong đó:

func|code

Một function hoặc một chuỗi code để thực thi. Thông thường, đó là một function. Vì lý do lịch sử, một chuỗi code cũng có thể được truyền vào, nhưng điều đó không được khuyến nghị.

delay

Độ trễ trước khi chạy, tính bằng mili giây [1000 ms = 1 giây], theo mặc định là 0.

arg1, arg2…

Đối số cho hàm [không được hỗ trợ trong IE9-]

Ví dụ: đoạn code này gọi function sayHi [] sau một giây:

function sayHi[] { alert['Hello']; } setTimeout[sayHi, 1000];

Với các đối số:

function sayHi[phrase, who] { alert[ phrase + ', ' + who ]; } setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

Nếu đối số đầu tiên là một chuỗi, thì JavaScript sẽ tạo một hàm từ nó. Vì vậy, điều này cũng sẽ hoạt động:

setTimeout["alert['Hello']", 1000];

Nhưng sử dụng chuỗi không được khuyến khích, hãy sử dụng các hàm mũi tên thay vì sử dụng chuỗi, như sau:

setTimeout[[] => alert['Hello'], 1000];

Xem thêm: Các loại function trong JavaScript.

Lưu ý

Các bạn mới làm quen đôi khi mắc lỗi khi thêm dấu ngoặc [] sau hàm:

// sai! setTimeout[sayHi[], 1000];

Điều đó không hoạt động, vì setTimeout mong đợi một tham chiếu đến một hàm. Và ở đây sayHi[] chạy hàm và kết quả thực thi của nó được chuyển đến setTimeout. Trong trường hợp này, kết quả của sayHi[] là không xác định [hàm không trả về gì], vì vậy không có gì được lên lịch.

Lệnh gọi setTimeout trả về timerId “định danh” mà chúng ta có thể sử dụng để hủy thực thi. Cú pháp hủy:

let timerId = setTimeout[...]; clearTimeout[timerId];

Trong đoạn mã dưới đây, tôi lập lịch cho chức năng và sau đó hủy bỏ nó. Kết quả là không có gì xảy ra:

let timerId = setTimeout[[] => alert["never happens"], 1000]; alert[timerId]; // định danh timerId clearTimeout[timerId]; alert[timerId];

Như chúng ta có thể thấy từ đầu ra của hàm alert[], trong trình duyệt, mã định danh là một số. Trong các môi trường khác, đây có thể là một cái gì đó khác. Ví dụ, Node.js trả về một đối tượng bộ đếm thời gian với các phương thức bổ sung.

Hàm setInterval trong JavaScript

Phương thức setInterval có cùng cú pháp như setTimeout:

let timerId = setInterval[func|code, [delay], [arg1], [arg2], ...]

Tất cả các đối số đều có cùng ý nghĩa. Nhưng không giống như setTimeout, nó chạy chức năng không chỉ một lần mà lặp đi lặp lại sau một khoảng thời gian nhất định. Đây cũng là điểm khác nhau giữa setTimeout[] và setInterval[] trong JavaScript.

Để dừng các cuộc gọi tiếp theo, chúng ta nên sử dụng hàm clearInterval [timerId].

Ví dụ sau sẽ hiển thị thông báo sau mỗi 2 giây. Sau 5 giây, đầu ra bị dừng:

// Hiển thị thông báo 2 giây một lần let timerId = setInterval[[] => alert['tick'], 2000]; // Sau 5 giây thì dừng setTimeout[[] => { clearInterval[timerId]; alert['stop']; }, 5000];

Thời gian tiếp tục trong khi cảnh báo được hiển thị

Trong hầu hết các trình duyệt, bao gồm cả Chrome và Firefox, bộ đếm thời gian bên trong sẽ tiếp tục trong khi hiển thị alert/confirm/prompt.

Vì vậy, nếu bạn chạy mã ở trên và không loại bỏ cửa sổ cảnh báo trong một thời gian, thì cảnh báo tiếp theo sẽ được hiển thị ngay lập tức khi bạn thực hiện. Khoảng thời gian thực tế giữa các cảnh báo sẽ ngắn hơn 2 giây.

Hàm setTimeout lồng nhau

Có hai cách để thực hiện một cái gì đó lặp đi lặp lại trong một khoảng thời gian. Một là sử dụng hàm setInterval[], hai là sử dụng hàm setTimeout[] lồng nhau. Giống như sau:

/** Thay vì sử dụng setInterval[]: let timerId = setInterval[[] => alert['tick'], 2000]; */ // Ta có thể sử dụng setTimeout[] lồng nhau let timerId = setTimeout[function tick[] { alert['tick']; timerId = setTimeout[tick, 2000]; // Được gọi sau khi kết thúc cuộc gọi hiện tại }, 2000];

Hàm setTimeout ở trên lên lịch cho cuộc gọi tiếp theo ngay khi kết thúc cuộc gọi hiện tại .

Giữa setTimeout[] và setInterval[] trong JavaScript, thì hàm setTimout[] sử dụng linh hoạt hơn setInterval[]. Bởi vì cuộc gọi tiếp theo trong setTimeout có thể được lên lịch tùy thuộc vào kết quả của cuộc gọi hiện tại.

Ví dụ: chúng ta cần viết một dịch vụ gửi yêu cầu đến máy chủ cứ sau 5 giây yêu cầu dữ liệu, nhưng trong trường hợp máy chủ quá tải, nó nên tăng khoảng thời gian lên 10, 20, 40 giây…

let delay = 5000; let timerId = setTimeout[function request[] { ...send request... if [yêu cầu không thành công do quá tải máy chủ] { // tăng interval cho lần chạy tiếp theo delay *= 2; } timerId = setTimeout[request, delay]; }, delay];

Và nếu các chức năng mà chúng ta đang lên lịch sử dụng CPU, thì chúng ta có thể đo thời gian thực hiện và lên kế hoạch cho cuộc gọi tiếp theo sớm hay muộn.

setTimeout lồng nhau cho phép đặt độ trễ giữa các lần thực thi chính xác hơn setInterval.

Hãy so sánh hai đoạn mã sau. Cái đầu tiên sử dụng setInterval:

let i = 1; setInterval[function[] { func[i++]; }, 100];

Cái thứ hai sử dụng setTimeout lồng nhau:

let i = 1; setTimeout[function run[] { func[i++]; setTimeout[run, 100]; }, 100];

Đối với setInterval, bộ lập lịch nội bộ sẽ chạy func [i ++] sau mỗi 100ms:

Bạn có để ý không?

Độ trễ thực sự giữa các cuộc gọi func[] cho setInterval ít hơn trong mã!

Điều đó là bình thường, vì thời gian thực thi của hàm func[] “tiêu tốn” một phần của khoảng thời gian. Có thể quá trình thực thi của hàm func[] hóa ra lâu hơn chúng ta mong đợi và mất hơn 100 mili giây.

Trong trường hợp này, nó sẽ đợi hàm func[] hoàn thành, sau đó kiểm tra bộ lập lịch và nếu hết thời gian, nó sẽ chạy lại ngay lập tức.

Và đây là hình ảnh cho setTimeout lồng nhau:

setTimeout lồng nhau sẽ đảm bảo độ trễ cố định [ở đây là 100ms]. Đó là vì một cuộc gọi mới được lên kế hoạch vào cuối cuộc gọi trước đó.

Điều gì sẽ xảy ra khi ta set độ trễ của setTimeout là 0?

Có một trường hợp sử dụng đặc biệt: setTimeout [func, 0] hoặc chỉ setTimeout [func].

Bộ lập lịch sẽ gọi hàm func[] càng sớm càng tốt. Nhưng bộ lập lịch sẽ chỉ gọi nó sau khi tập lệnh hiện đang thực thi hoàn tất.

Vì vậy, hàm được lên lịch sẽ chạy “ngay sau” tập lệnh hiện tại.

Ví dụ: kết quả đầu ra là “Hello”, sau đó là “World”:

setTimeout[[] => alert["World"]]; alert["Hello"];

Dòng đầu tiên “đưa cuộc gọi vào lịch sau 0ms”. Nhưng trình lập lịch sẽ chỉ “kiểm tra lịch” sau khi tập lệnh hiện tại hoàn tất, vì vậy “Hello” là đầu tiên và “World” – sau nó.

Trong trình duyệt, có một giới hạn về tần suất các bộ hẹn giờ lồng nhau có thể chạy. Tiêu chuẩn  HTML5 standard  cho biết: “sau năm bộ hẹn giờ lồng nhau, khoảng thời gian buộc phải ít nhất 4 mili giây.”.

Hãy chứng minh ý nghĩa của nó với ví dụ bên dưới. Lệnh gọi setTimeout trong nó tự lên lịch lại với độ trễ bằng không. Mỗi cuộc gọi ghi nhớ thời gian thực từ cuộc gọi trước đó trong mảng thời gian. Sự chậm trễ thực sự trông như thế nào? Hãy xem ví dụ sau:

let start = Date.now[]; let times = []; setTimeout[function run[] { times.push[Date.now[] - start]; // nhớ độ trễ từ cuộc gọi trước if [start + 100 < Date.now[]] alert[times]; // Hiển thị độ trễ sau 100ms else setTimeout[run]; // lên lịch lại }]; // Kết quả // 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100

Đầu tiên các cuộc gọi được gọi ngay lập tức, nhưng sau đó chúng ta có thể thấy 9, 15, 20, 24… Độ trễ bắt buộc trên 4 ms giữa các lần gọi có hiệu lực.

Điều tương tự cũng xảy ra nếu chúng ta sử dụng setInterval thay vì setTimeout: setInterval [f] chạy vài lần với độ trễ bằng 0 và sau đó với độ trễ trên 4 ms.

Đối với JavaScript phía máy chủ, hạn chế đó không tồn tại và tồn tại các cách khác để lập lịch công việc không đồng bộ ngay lập tức, như  setImmediate cho Node.js. Vì vậy, lưu ý này dành riêng cho từng trình duyệt.

Kết luận

Cùng ôn lại một số kiến thức chính về hàm setTimeout[] và setInterval[] trong JavaScript đã học trong bài viết này nhé:

• Phương thức setTimeout[func, delay, ...args] và setInterval[func, delay, ...args] cho phép chúng ta chạy function func[] một hoặc lặp đi lặp lại sau delay milliseconds.
• Để hủy thực thi, chúng ta nên gọi clearTimeout / clearInterval với giá trị được trả về bởi setTimeout / setInterval.
• Lệnh gọi setTimeout lồng nhau là một giải pháp thay thế linh hoạt hơn cho setInterval, cho phép chúng tôi đặt thời gian giữa các lần thực hiện chính xác hơn.
• Lập lịch với độ trễ bằng không với setTimeout [func, 0] [hoặc setTimeout [func]] được sử dụng để lập lịch cuộc gọi “càng sớm càng tốt, nhưng sau khi tập lệnh hiện tại hoàn tất”.
• Trình duyệt giới hạn độ trễ tối thiểu cho năm cuộc gọi lồng nhau trở lên của setTimeout hoặc setInterval [sau cuộc gọi thứ 5] là 4ms.

Hãy lưu ý rằng tất cả các phương thức lên lịch trình không đảm bảo độ trễ chính xác.