开源日报每天推荐一个 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/