Trong JavaScript, có những tình huống khi chúng ta cần đảm bảo rằng nội dung đã nhập trên một trang web cụ thể là chính xác và cập nhật. Ví dụ: yêu cầu hiển thị nội dung gần đây nhất trên một trang web trong khi điền vào một biểu mẫu dài và quan sát những thay đổi mới hoặc khi bạn muốn kiểm tra một trang web. Trong những trường hợp như vậy, việc tự động làm mới một trang web cứ sau 5 giây bằng JavaScript sẽ rất hữu ích trong việc đối phó với những loại tình huống này.
Bài viết này sẽ thảo luận về các phương pháp để tự động làm mới một trang web sau mỗi 5 giây bằng JavaScript.
Làm thế nào để tự động làm mới trang web sau mỗi 5 giây bằng JavaScript?
Để tự động làm mới một trang web cứ sau 5 giây bằng JavaScript, có thể sử dụng các phương pháp sau:
- “ setInterval () ' và ' document.querySelector () ”Phương pháp
- “ Làm tươi() ' phương pháp
- “ setTimeout() ' phương pháp
Lần lượt đi qua các phương pháp đã thảo luận!
Phương pháp 1: Tự động làm mới trang web 5 giây một lần trong JavaScript Sử dụng phương thức setInterval () và document.querySelector ()
Các ' setInterval () ' document.querySelector () ”Phương thức nhận phần tử đầu tiên phù hợp với bộ chọn CSS. Các phương pháp này có thể được sử dụng kết hợp để truy cập thẻ tiêu đề cụ thể và đặt khoảng thời gian thành một chức năng cần thiết với sự trợ giúp của bộ đếm thời gian.
Cú pháp
setInterval ( hàm, mili giây, par1, par2 )Trong cú pháp trên, “ hàm số 'Đề cập đến chức năng cần được truy cập,' mili giây 'Là khoảng thời gian cụ thể để thực thi và' cặp 1 ' và ' par2 ”Là các tham số bổ sung.
tài liệu. querySelector ( CSS bộ chọn )
Nơi đây, ' Bộ chọn CSS ”Đại diện cho một hoặc nhiều bộ chọn CSS.
Kiểm tra ví dụ sau.
Thí dụ
Đầu tiên, chỉ định tiêu đề và tiêu đề trong thẻ
, tương ứng:
< Tiêu đề > Làm mới trang sau mỗi 5 giây < / Tiêu đề >
< h2 Phong cách = 'text-align: left' > Tự động làm mới trang < / h2 >
Bây giờ, hãy đặt giá trị bộ hẹn giờ là “ 1 ”:
để hẹn giờ = 1 ;Sau đó, áp dụng “ setInterval () ”Với một“ 1000ms ' giá trị. Điều này sẽ tăng bộ đếm thời gian mỗi giây. Ngoài ra, hãy truy cập vào tiêu đề được chỉ định để hiển thị nó trên “ Mô hình đối tượng tài liệu (DOM) ”Khi kết thúc giá trị bộ hẹn giờ.
Cuối cùng, lặp lại giá trị của bộ đếm thời gian với gia số “ 1 'Sử dụng' ++ ”Toán tử sau tăng và áp dụng một điều kiện theo cách sao cho nếu giá trị vượt quá 5, thì“ location.reload () ”Sẽ dẫn đến việc tải lại cửa sổ:
setInterval ( ( ) => {tài liệu. querySelector ( 'h2' ) . innerText = hẹn giờ ;
hẹn giờ ++;
nếu ( hẹn giờ > 5 )
địa điểm. tải lại ( ) ;
} , 1000 ) ;
Có thể thấy rằng trang web của chúng tôi được tự động làm mới sau mỗi năm giây:
Phương pháp 2: Tự động làm mới trang web 5 giây một lần trong JavaScript Sử dụng sự kiện onload
Các ' đang tải ”Sự kiện được kích hoạt khi một đối tượng đã được tải. Kỹ thuật này có thể được thực hiện để làm mới trang với sự trợ giúp của một chức năng do người dùng xác định khi trang web được tải.
Cú pháp
sự vật. đang tải = làm mới trang ( ) { myScript } ;Trong cú pháp đã cho, “ hàm số ”Đề cập đến hàm cần được gọi khi đối tượng được tải.
Hãy xem ví dụ sau.
Thí dụ
Đầu tiên, bao gồm tiêu đề và tiêu đề như đã thảo luận trong phương pháp trước:
< Tiêu đề > Làm mới trang sau mỗi 5 giây < / Tiêu đề >< h2 > Tự động làm mới trang < / h2 >
Bây giờ, hãy áp dụng “ đang tải 'Sự kiện và gọi hàm' làm mới trang() ' và vượt qua ' 5000 ”Là đối số cho biết khoảng thời gian năm giây:
< tải trọng cơ thể = 'JavaScript: refreshPage (5000);' >thân hình >
Cuối cùng, hãy xác định một hàm có tên là “ làm mới trang() ' với ' t ”Như một đối số đề cập đến thời gian đã đặt để tự động làm mới trang web. Các ' location.reload () ”Phương thức sẽ tải lại trang sau thời gian được chỉ định:
chức năng refreshPage ( t ) {setTimeout ( 'location.reload (true);' , t ) ;
}
Đầu ra
Phương pháp 3: Tự động làm mới trang web cứ sau 5 giây trong JavaScript Sử dụng phương thức setTimeout ()
Các ' setTimeout() ”Phương thức gọi một hàm sau một thời gian đã đặt cụ thể. Phương pháp này có thể được áp dụng để tải lại một trang web sau một khoảng thời gian chờ đã đặt cụ thể.
Cú pháp
setTimeout ( hàm, mili giây, par1, par2 )Trong cú pháp đã cho, “ hàm số 'Đề cập đến chức năng được truy cập,' mili giây 'Là khoảng thời gian cụ thể để thực thi và' cặp 1 ',' par2 ”Là các tham số bổ sung.
Thí dụ
Trong thẻ script của trang HTML, hãy áp dụng “ setTimeout() ”Theo cách như vậy khi 5 giây trôi qua, phương thức location.reload () sẽ tải lại trang web:
< script >setTimeout ( 'location.reload (true);' , 5000 ) ;
script >
Đầu ra
Chúng tôi đã thảo luận về tất cả các phương pháp tiện lợi để tự động làm mới trang web sau mỗi 5 giây bằng JavaScript.
Sự kết luận
Để tự động làm mới một trang web cứ sau 5 giây bằng JavaScript, hãy sử dụng “ setInterval () ' và ' document.querySelector () ' Làm tươi() 'Để làm mới một trang web hoặc' setTimeout() ”Để đặt giới hạn thời gian chờ làm mới cụ thể của một trang web. Bài viết này trình bày các phương pháp để tự động làm mới một trang web sau mỗi 5 giây bằng JavaScript.