Kỹ thuật debounce để giảm tải máy chủ khi người dùng tác động

Pham Kha
13:07 04-09-2022
1844

debounce() là kỹ thuật buộc một hàm phải đợi một khoảng thời gian nhất định trước khi thực thi. Trong khoản thời gian đợi, mọi tác động sẽ đều bị bỏ qua và chỉ nhận duy nhất 1 hành động diễn ra trong thời gian chúng ta định trước.

Ví dụ 1: Một người dùng tìm kiếm trên thanh tìm kiếm của bạn mỗi lần gõ chữ thì sẽ gửi một request đến máy chủ sẽ khiến máy chủ bạn bị hao tài nguyên, khi sử dụng debounce thì khi nào người dùng ngưng gõ chữ khoản 1 giây mới gửi request nghĩa là bạn chỉ tốn có 1 request đến máy chủ thôi.

Kỹ thuật debounce để giảm tải máy chủ khi người dùng tác động

Các sự kiện như scrollmovemouseclick hao tốn của chúng ta rất nhiều tài nguyên mỗi khi nó được gọi để thực hiện một hành động. Sử dụng debounce nhằm mục đích giảm hao tổn tài nguyên bằng cách ngăn một chức năng được gọi nhiều lần liên tiếp.

Thực hiện debounce với javascript

debounce có bản chất là một Higher Order Function. Lưu trữ thời gian nhận sự kiện so ở hàm ngoài với thời gian xác định gọi sự kiện sau khi kết thúc và trả về một hàm con bên trong để so sánh giữa thời gian gọi sự kiện và khoảng thời gian thực để gọi hàm thực thi.

Hiểu đơn giản hơn là khi người tác động vào hàm debounce thì bộ đếm ngược bắt đầu, trong thời gian đếm ngược mà nếu người dùng tiếp tục tác động vào hàm debounce thì lần tác động trước đó sẽ bị bỏ qua và chỉ xử lý khí người dùng không tác động vào hàm debounce nữa.

Nó sẽ có hình dạng như thế này

Trong đó,

  • fn: Là hàm được thực thi
  • ms: Khoảng thời gian giới hạn

Sử dụng thư viện lodash

Bên trên chúng ta đã biết sơ qua về cách vận hành là logic để thực hiện kỹ thuật debounce. Bên cạnh đó, chúng ta cũng có thể sử dụng các thư viện nổi tiếng bên ngoài như lodash để sử dụng các kỹ thuật này.

Một lời khuyên nhỏ các bạn cũng nên sử dụng các thư viện này vì họ đã hỗ trợ nó tốt hơn cách chúng ta viết lại nó. Tất nhiên, sử dụng thư viện không có nghĩa chúng ta không có kiến thức về nó. Một điều nữa để mang tính thống nhất cho dự án, dễ sử dụng và làm việc nhóm, chúng ta cũng nên sử dụng thư viện thay vì viết lại những cái đã có

Quảng cáo

Cách sử dụng trong lodash cũng hết sức đơn giản


element.addEventListener("click", _.debounce(() => {
	console.log("execute me");
}, 500))

Không khác gì mấy so với chúng ta

Sử dụng debounce của lodash cho reactjs

Đối với reactjs hay nextjs chúng ta sẽ sử dụng chung với useCallback để ghi nhớ lại hàm debouce, nếu không sử dụng useCallback thì hàm debounce trong lodash khi sử dụng chung với reactjs củng giống với 1 function bình thường cứ gọi là chạy mà không deley vì thế chúng ta cần sử dụng useCallback để ghi nhớ lại debounce, lần sau gọi thì useCallBack sẽ kiểm tra xem thằng debounce này được tạo ra chưa, nếu đã tạo rồi thì nó sẽ không tạo nữa nên function debounce hoạt động như ý muốn.

import React, { useCallback } from 'react'
import { debounce } from 'lodash'

export default function searchText() {
    const debounceFn = useCallback(debounce(onSearch, 1000), []);
    function handleSearch(searchText) {
        debounceFn(searchText)
    }
    function onSearch(searchText) {
        console.log(searchText)
    }
    return (
        <div className="search-box">
            <input type="text" onChange={(text) => handleSearch(text)} />
        </div>)
}

Vậy khi nào nên sử dụng debounce cho website

Debounce được sử dụng với những chức năng mà người dùng có thể thao tác vào như nút like bài viết, nhập từ khoá ô tìm kiếm, nút comment ..😀🤪. Nối chung băt cứ chức năng nào mà người dùng tác động vào để gửi request lên server

Quảng cáo

Nguồn: Codestus.com

Bài viết mới