開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年1月25日，開源日報第1085期：
今日推薦開源項目：《vx.dev》
今日推薦英文原文：《From My Experience: useEffect vs useLayoutEffect in React》

開源項目

今日推薦開源項目：《vx.dev》傳送門：項目鏈接

推薦理由： 一個開源的替代v0.dev的選擇！具有成本效益，高度可定製，並且與GitHub無縫集成

網站直達：vxdev.pages.dev

英文原文

今日推薦英文原文：From My Experience: useEffect vs useLayoutEffect in React

推薦理由：Debounce和Throttle是JavaScript中用於優化頻繁事件處理的兩種常見技術。Debounce延遲函數執行，確保在一段靜止期後觸發，而Throttle通過強制最大執行頻率限制函數的調用，文章有例子詳細說明

Debounce vs. Throttle Explained — Optimizing JavaScript Event Handling 🚀🚀

In JavaScript, when it comes to handling events that occur frequently, such as scrolling, resizing, or input typing, it』s essential to optimize performance and reduce unnecessary computations. Two common techniques used to address this are debounce and throttling. In this article, we will compare and contrast debounce and throttling, explore real-world examples for each technique, and discuss their advantages and best use cases.

img

Photo by Onur Binay on Unsplash

Debouncing is a technique that delays the execution of a function until a certain period of inactivity has passed. It ensures that the function is only triggered after a specified interval of calmness, ignoring rapid consecutive events within that interval.

Real-World Example:

  • **Autocomplete Search -

    **Consider an autocomplete search feature that makes an API call on every keystroke. Without debouncing, the API would be bombarded with requests as the user types. By applying debounce, we can delay the API call until the user pauses typing, reducing unnecessary requests.

function debounce(func, delay) {
  let timeoutId;

  return function() {
    const args = arguments;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      func.apply(this, args);
    }, delay);
  };
}
const handleSearch = debounce(function(searchTerm) {
  // Make API call with searchTerm
}, 300);

In this example, the debounce function takes a func and a delay parameter. It returns a debounced version of the function. The debounced function is then used to wrap the actual search handler function, delaying its execution until the user pauses typing for 300 milliseconds. This way, the API call is made only once the user has finished typing or after a brief pause.

Throttling:

Throttling is a technique that limits the frequency of function invocations by enforcing a maximum execution rate. It ensures that the function is called at a specific interval, regardless of how frequently the event occurs.

Real-World Example:

  • **Scrolling Event

    **Consider a scenario where an event listener is attached to the window』s scroll event. Without throttling, the event handler would be called rapidly as the user scrolls. By applying throttling, we can limit the execution of the event handler to a predefined interval.

function throttle(func, limit) {
  let inThrottle = false;

  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;

      setTimeout(function() {
        inThrottle = false;
      }, limit);
    }
  };
}
const handleScroll = throttle(function() {
  // Handle scroll event
}, 200);

In this example, the throttle function takes a func and a limit parameter. It returns a throttled version of the function. The throttled function is then used to wrap the actual scroll event handler. It ensures that the handler is called at most every 200 milliseconds. If the handler is called more frequently, subsequent invocations within the interval are ignored.

Debounce vs. Throttling:

Choosing the Right Technique Debounce and throttling techniques offer different benefits depending on the use case.

Advantages of Debounce:

  1. Minimizes unnecessary function invocations during rapid events.
  2. Effective for scenarios where you want to trigger an action after a pause, such as autocomplete search, form validation, or live search suggestions.

Advantages of Throttling:

  1. Limits the rate of function invocations, ensuring a controlled execution frequency.
  2. Useful for scenarios where you want to limit the execution of computationally expensive operations, such as handling scrolling, resizing, or mousemove events.

Summary:

Debounce and throttling are powerful techniques to optimize JavaScript code execution, especially for frequent events. Debounce is ideal for scenarios where you want to trigger an action after a pause, while throttling is suitable for controlling the execution frequency of computationally expensive operations. Understanding the differences between debounce and throttling empowers developers to choose the appropriate technique based on their specific use cases, resulting in enhanced performance and a better user experience.

Hope the above article gave a better understanding. If you have any questions regarding the areas I have discussed in this article, areas of improvement don』t hesitate to comment below.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/