English

Giới thiệu về Debounce và Throttle

avatar-tin.jpeg

Tác giả

Tin Tran

31/05/2023

Chia sẻ

debounce-and-throttle.png

Debounce

Kỹ thuật debounce giúp giảm tần suất gọi hàm khi sự kiện xảy ra liên tục trong một khoảng thời gian ngắn. Nếu sự kiện xảy ra liên tục, hàm chỉ được gọi sau khi khoảng thời gian xác định đã trôi qua mà không có sự kiện mới xảy ra. Điều này thường được sử dụng để giảm tải cho các tác vụ đòi hỏi tài nguyên nặng như việc tìm kiếm tự động khi người dùng nhập liệu.

Ví dụ:

Chưa áp dụng debounceĐã áp dụng debounce
without-debounce.gifwith-debounce.gif

Dưới đây là một ví dụ cách sử dụng debounce trong JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce</title>
  </head>
  <body>
    <script>
      function debounce(func, delay = 500) {
        let timer;
        return (...args) => {
          clearTimeout(timer);
          timer = setTimeout(() => {
            func.apply(this, args);
          }, delay);
        };
      }

      // Sử dụng debounce để giảm tần suất gọi hàm xử lý sự kiện resize
      const handleResize = debounce(function () {
        console.log("Window resized!");
      }, 500);

      window.addEventListener("resize", handleResize);
    </script>
  </body>
</html>

Throttle

Kỹ thuật throttle giới hạn tần suất gọi hàm trong một khoảng thời gian nhất định. Thay vì chờ một khoảng thời gian nhất định sau mỗi lần sự kiện xảy ra như debounce, throttle đảm bảo rằng hàm được gọi duy nhất một lần sau mỗi khoảng thời gian nhất định.

Ví dụ:

Chưa áp dụng throttleĐã áp dụng throttle
without-throttle.gifwith-throttle.gif

Dưới đây là một ví dụ cách sử dụng throttle trong JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Throttle</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
      repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
      adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
      quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
      commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
      provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
      dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
    </p>
    <script>
      function throttle(func, delay = 500) {
        let lastCall = 0;

        return (...args) => {
          const now = new Date().getTime();
          if (now - lastCall < delay) return;
          lastCall = now;
          return func(...args);
        };
      }

      // Sử dụng throttle để giới hạn tần suất gọi hàm xử lý sự kiện scroll
      const handleScroll = throttle(function () {
        console.log("Window scrolled!");
      }, 300);

      window.addEventListener("scroll", handleScroll);
    </script>
  </body>
</html>

Chia sẻ

Liên hệ