JavaScript được sử dụng làm ngôn ngữ lập trình phía máy khách cũng như ngôn ngữ lập trình phía máy chủ. Nócung cấp rất nhiều phương pháp cho một số chức năng được thực hiện một cách dễ dàng. Đây là những gì đã làm một trong những ngôn ngữ lập trình phổ biến nhất cũng như nó cũng đang được sử dụng rộng rãi trên một số loại hình phát triển sản phẩm.SetInterval trong JavaScript là một phần của Sự kiện thời gian trong JavaScript và chúng ta sẽ tìm hiểu về nó theo trình tự sau:
Thời gian sự kiện
JavaScript cũng cho phép thực thi chức năng cũng như các phương pháp liên quan đến thời gian chứ không phải thời gian thực hiện chương trình. Điều này cho phép thực hiện các chức năng tại thời điểm xác định bất kể thời gian thực hiện chương trình.
Hai phương pháp chính để sử dụng Sự kiện thời gian trong JavaScript là:
setTimeout (hàm, mili giây)
Hàm này thực thi hàm bên trong được truyền dưới dạng tham số chỉ một lần sau thời gian được chỉ định tính bằng mili giây.
setInterval (hàm, mili giây)
Hàm này thực thi chức năng từ thời gian thực hiện và sau mỗi khoảng thời gian đạt được. Nó lặp lại việc thực thi chức năng ở mọi khoảng thời gian.
quản trị viên linux làm gì
Bây giờ, hãy tiếp tục và xem cách SetInterval trong JavaScript hoạt động.
SetInterval trong JavaScript
Tham số đầu tiên của hàm này là hàm được thực thi và tham số thứ hai cho biết khoảng thời gian giữa mỗi lần thực hiện.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Ở đây, document.getElementById lấy phần tử từ có id là “demo” và hàm d.toLocaleTimeString () cung cấp thời gian hiện tại từ hệ thống.
Do đó, điều này được lặp lại sau mỗi 1000 mili giây tương đương với 1 giây. Do đó, hàm liên tục được thực thi sau mỗi 1 giây và do đó thời gian được cập nhật mỗi giây.
Vậy làm thế nào để chúng ta dừng việc thực thi này? Hãy cùng tìm hiểu!
Làm thế nào để Ngừng Thực hiện?
Chúng ta có thể dừng việc thực thi từ hàm setInterval () với sự trợ giúp của một hàm khác được gọi là clearInterval ().clearInterval () sử dụng biến được trả về từ hàm setInterval ().
Ví dụ:
myVar = setInterval (hàm, mili giây) clearInterval (myVar)
Dưới đây là một ví dụ sử dụng cả setInterval () cũng như clearInterval (). Điều này khởi động đồng hồ và cung cấp một nút để dừng thời gian.
Dưới đây là một chiếc đồng hồ.
Thời gian dừng lại
Nhấp vào nút ở trên để dừng thời gian.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Đầu ra:
Một số ví dụ khác với setInterval () và clearInterval ().
Tạo thanh tiến trình động
#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: Absol}
Nhấp vào Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}Đầu ra:
Đầu ra ban đầu
Đầu ra sau khi nhấp vào nút có nội dung “Nhấp vào Tôi”.
Chuyển đổi giữa hai nền
Ngừng chuyển đổi hàm var myVar = setInterval (setColor, 300) setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'pink': 'yellow'} function stopColor () {clearInterval (myVar)}Đầu ra:
Màu sắc sẽ được chuyển đổi giữa màu vàng và màu hồng. Kết quả bên trên là trước khi nhấp vào nút và bên dưới là sau khi nhấp vào nút.
cách sử dụng trình ghi nhật ký trong java
Với điều này, chúng ta đã đến phần cuối của bài viết SetInterval trong JavaScript. Tôi hy vọng bạn đã hiểu cách hoạt động của phương thức SetInterval.
Kiểm tra của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog này và chúng tôi sẽ liên hệ lại với bạn.