Tag: Javascript

Xin chào các bạn, trong bài viết này mình chia sẻ cho các bạn cách làm thế nào để tự động tải lại trang web khi mà người dùng truy cập trang đó không có bất kỳ hoạt động nào trên trang trong một khoảng thời gian nhất định. Ví dụ: 10 phút (không hề có lần di chuyển con trỏ chuột, click chuột, hay nhấn phím, … trên trang) thì ta sẽ tải lại trang đó.

Code Javascript

/* Auto refresh the page when user no activity for few seconds, using Javascript */
 
function setIdle(seconds, callback) {
    var timer,
        interval = (seconds * 1000);
    function refresh() {
        // Reset timer
        clearTimeout(timer);
        // Set timer
        timer = setTimeout(callback, interval);
    }
    // Add event to set timeout
    window.addEventListener("mousemove", refresh, true);
    window.addEventListener("click", refresh, true);
    window.addEventListener("keypress", refresh, true);
    // Invoke function "refresh" for first time
    refresh();
}
 
// Example, invoke function "setIdle"
setIdle(20, function() {
    window.location.reload(true);
});

Demo

Các bạn copy toàn bộ đoạn code trên thêm vào thẻ <script> trên trang web mà các bạn cần tải lại và sửa lại tham số 20 ở hàm setIdle nhé, mình để 20 ở đây có nghĩa là 20s. Ví dụ các bạn muốn để thời gian là 15 phút thì truyền 900 (60 * 15 = 900s  ), như vậy là cứ mỗi 15 phút mà người truy cập không có bất kỳ thao tác, hoạt động nào trên trang web, trang đó sẽ được tải lại.

Chắc hẳn khi bạn làm một thẻ input nhập nội dung để tìm kiếm và không cần nút bấm để submit, vậy thì việc submit sẽ là tự động sau khi nhập bất kỳ ký tự nào vào thẻ input. Khi này thì sẽ dùng sự kiện thích hợp nhất sẽ là keyup hoặc keydown của jQuery, mọi thứ đều diễn ra bình thường và gần như kết quả sẽ trả về ngay lập tức cho bạn. Nhưng có một vấn đề ở đây là bạn có chắc sau khi nhập các ký tự thì chỉ có duy nhất 1 request gửi đến server? Không! mỗi khi bạn nhập 1 bất kỳ thì sẽ là 1 lần gửi request đến server, việc này thật sự rất nghiêm trọng!

Sau đây là đoạn code mình dùng timeout của Javascript để xử lý chỉ gửi duy nhất 1 lần request đến server nhập xong từ khóa tìm kiếm.

Mã Javascript:

<script type="text/javascript">
    var timeout = null;
    $('#keyword').on('keyup keydown keypress', function(e) {
        // xóa sự kiện timeout lưu trước đó
        clearTimeout(timeout);
  
        timeout = setTimeout(function() {
            alert('Xử lý gửi dữ liệu lên server ở đây');
        }, 1000);
    });
</script>