Debounce tối ưu hóa công cụ tìm kiếm trong reactjs

Debounce là gì trong javascript?

Debound 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.

Các sự kiện như `scroll`, `mousemove,` `click `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 debound 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.

//Tạo Debounced đơn giản

function Debounced(callback, delay= 200) {
  delay = delay || 0;
  let timeId = undefined;
  return (...args: any) => {
    if (timeId) {
      clearTimeout(timeId);
      timeId = undefined;
    }
    timeId = setTimeout(() => {
      callback(args);
      clearTimeout(timeId);                                                               
    }, delay);
  };
}

Trong đó,

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

Thực Hiện

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.

ReactJS

 const inputRef =useRef() 

 const getListUserSearch = () => {console.log(inputRef.current.value)};

 <input ref={inputRef}
         onInput={Debounced(getListUserSearch, 1000)}
         type="search "
         placeholder="Tìm kiếm bài viết..."
 />

// Khi bạn gõ vào input liên tục nếu kết thúc sau 1000s mà bạn dừng thì sẽ chạy qua hàm 
// getListUserSearch ()

Sử dụng thư viện Lodash

Trang chủ 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.

<input ref={inputRef}                                                                   
       onClick={_.debounce(() => { console.log("execute me")}, 500)}
       type="search"
 /> 

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ó và cách sử dụng trong lodash cũng hết sức đơn giản