JavaScript - Throttle (節流) 常見的面試問題 (Scrollbar, Infinite Scroll) (前端優化)

Wei Wei

17 Feb 202310:41

Summary

TLDRThe video script introduces the concept of Throttling, a technique similar to Debouncing but with distinct behaviors. It demonstrates how Throttle can be applied to implement an Infinite Scroll feature on a webpage. The script provides a step-by-step guide on creating a Throttle function, emphasizing the importance of using a regular function for the callback to avoid arrow function scoping issues. It also explains the difference between Throttle, which executes the callback at regular intervals during an action, and Debounce, which executes the callback after the action has ceased for a specified time.

Takeaways

🚦 Throttle and Debounce are similar concepts but have distinct differences in their execution. Throttle is used for controlling the frequency of function execution, while Debounce is for delaying the execution until a certain amount of time has passed without any further triggering.
🔄 The Throttle function is implemented with two parameters: the callback function to be executed and the time interval.
🔧 In the Throttle function, a timer is used to control the frequency of execution, and it's shared across all invocations of the function through closure.
⏱️ The Throttle function should clear the timer before executing the callback to ensure it doesn't accumulate multiple timers.
🎯 Throttle is used to solve scenarios where you want a function to fire at a consistent interval while an action is being performed, like loading new elements on scroll.
📈 The Infinite Scroll functionality can be achieved by using Throttle to check scroll position and load more content when nearing the end of the list.
📊 To determine if the scroll has reached the bottom, the script calculates the sum of scroll position and client height, and compares it to the scroll height.
🤔 Floating-point arithmetic issues can cause the scroll position check to be inaccurate, so adding a buffer (like 10 pixels) to the comparison can ensure more reliable results.
🔄 The video script suggests that for early loading of content, the check can be triggered at a certain percentage (e.g., 90%) of the scroll height.
👷 The use of a regular function (not an arrow function) in Throttle allows for the preservation of the function context, which is important if the callback function expects to have access to specific arguments or the 'this' keyword.
🔗 If the callback function requires arguments or a specific 'this' context, the Throttle function should return a version of the callback that has been bound with the correct context and arguments using methods like 'apply'.

Q & A

What is the main topic of the video?
-The main topic of the video is the implementation of the Throttle function in JavaScript, which is used to control the rate at which a function is executed. The context of its use in creating an infinite scroll feature is also discussed.
How does Throttle differ from Debounce, according to the video?
-Throttle differs from Debounce in that Throttle controls the execution rate of a function during continuous actions, executing the function at regular intervals, while Debounce waits for the action to stop and then executes the function after a certain delay.
Why does the presenter decide not to use an arrow function for the Throttle implementation?
-The presenter decides not to use an arrow function for the Throttle implementation because the context of 'this' and the passing of arguments are not concerns for the example shown. However, for situations where 'this' binding or argument passing is necessary, a different approach would be required.
What problem does Throttle solve in the video demo?
-In the video demo, Throttle solves the problem of excessive function executions during continuous events, such as scrolling. It's applied to efficiently load new elements for an infinite scroll feature without overwhelming the browser with too many calls.
What kind of elements are initially created on the webpage for the infinite scroll demo?
-For the infinite scroll demo, the webpage initially creates 30 paragraph ('p') tags to enable scrolling and demonstrate the functionality.
What criteria are used to load more elements in the infinite scroll feature?
-More elements are loaded in the infinite scroll feature when the scrollbar reaches the bottom of the page. This is determined by calculating if the sum of scrollTop and clientHeight equals the scrollHeight, indicating that the bottom has been reached.
What adjustments are made to handle floating point issues when checking if the bottom of the page is reached?
-To handle floating point issues when checking if the bottom of the page is reached, a small additional value (like 10) might be added to the sum of scrollTop and clientHeight to ensure it exceeds scrollHeight, accommodating any discrepancies due to floating point calculations.
How is the Throttle function adjusted to handle parameters and 'this' binding if needed?
-If parameters and 'this' binding are needed, the Throttle function can be adjusted by using 'apply' to bind 'this' and pass arguments to the callback function, ensuring the correct context and parameters are used during execution.
What suggestion from a viewer does the presenter mention at the beginning?
-The presenter mentions a suggestion from a viewer regarding a problem that could be solved using the Throttle function, highlighting the practical application of concepts discussed in the video.
What alternative threshold is suggested for triggering the loading of new elements before reaching the bottom of the page?
-An alternative threshold suggested is checking if the ratio of (scrollTop + clientHeight) to scrollHeight is greater than or equal to 0.9, indicating the scrollbar is 90% down the page, which triggers loading new elements before actually reaching the bottom.

Outlines

00:00

🚦 Introduction to Throttling and Infinite Scroll

The video begins with an introduction to the concept of throttling, drawing parallels to the previously discussed debounce technique. The main focus is on demonstrating how to implement an Infinite Scroll feature using throttling. The speaker explains that the Throttle function will be triggered by the scrolling action and will execute a callback function at specified intervals. A practical example is given, where the Throttle function is used to load new elements into the page as the user scrolls towards the bottom. The setup includes creating 30 placeholder elements to enable scrolling and defining the Throttle function with a 1-second delay. The explanation delves into the technical details, emphasizing the difference between throttle and debounce, and highlighting the importance of using a regular function instead of an arrow function for scope reasons.

05:02

📏 Cross-Browser Scrollbar Handling and Throttling Logic

This paragraph delves into the specifics of handling the scrollbar across different browsers and the logic behind the throttling mechanism. The speaker discusses the importance of using `documentElement.clientHeight` for cross-browser compatibility and introduces the calculation for determining when the user has reached the bottom of the page. The concept of floating-point precision is addressed, and a solution is offered by adding a buffer value to the comparison. The speaker then demonstrates how to load more elements into the page when near the bottom, enhancing the Infinite Scroll experience. The explanation includes writing a loop to create new paragraph tags and appending them to the DOM, as well as adjusting the throttling function to accommodate for early loading at 90% of the scroll position.

10:05

🔄 Throttle vs Debounce and Function Binding

The speaker concludes the video by contrasting the Throttle function with the Debounce function. While Debounce waits for an action to stop before executing the callback function, Throttle executes the callback at regular intervals as long as the action is being performed. The speaker reiterates the key difference and provides a final overview of the Throttle function's implementation. Additionally, the importance of using regular functions for callbacks that do not require arguments or `this` binding is emphasized. The speaker also touches on how to adjust the Throttle function for callbacks that do require arguments or `this` binding, suggesting the use of `apply` for context and arguments passing.

Mindmap

Keywords

💡Throttle

Throttle, in the context of this video, refers to a programming technique used to limit the rate at which a function can be executed. This is particularly useful in situations where certain code shouldn't run too frequently, such as handling scroll or resize events. The presenter uses Throttle to solve a viewer's question by applying it to an infinite scroll functionality, demonstrating how Throttle prevents excessive function calls by only executing at every fixed time interval (e.g., every second) as the user scrolls.

💡Debounce

Debounce is another programming technique that ensures a function is executed after the caller stops calling it for a certain period. It's similar to Throttle but with a key difference: Debounce waits for the event to stop firing for a predefined time before executing the function, making it ideal for situations like search input fields where you don't want to execute the search query for every keystroke. In the video, the presenter compares Debounce to Throttle, highlighting that while both manage the rate of function execution, they do so in different ways.

💡Infinite Scroll

Infinite Scroll is a web design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. The presenter uses Throttle to implement infinite scroll by loading new elements whenever the scrollbar reaches the bottom. This approach ensures a seamless user experience by providing content on-demand without full page refreshes, making it highly effective for social media feeds, news articles, or image galleries.

💡Callback Function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. In the video, the presenter explains how Throttle and Debounce techniques require a callback function to specify what action should be taken when the event (like scrolling) occurs. This is crucial for both techniques as they control the execution rate of this callback based on their respective logic.

💡Timer Variable

The timer variable is used within the Throttle function to keep track of the setTimeout calls. This allows the function to limit how often the callback is executed. The presenter mentions using a closure to share this timer variable across calls to the Throttle function, ensuring that subsequent calls can check if the timer is already set and act accordingly. This mechanism is central to how Throttle limits the rate of function execution.

💡SetTimeout

SetTimeout is a JavaScript method that executes a function after a specified number of milliseconds. It's instrumental in implementing Throttle and Debounce logic. In the context of Throttle, as explained in the video, SetTimeout is used to ensure the callback function is executed only once per specified time interval, thus preventing it from running too frequently during continuous events like scrolling.

💡Event Listener

An event listener is a procedure in JavaScript that waits for an event to occur, like a mouse click or a keypress. The presenter sets up an event listener for scroll events to trigger the Throttle function. This is a critical step in creating interactive web applications, as it allows developers to define how the application should respond to user inputs or actions.

💡Scroll Event

The scroll event is fired when the user scrolls through a container that has overflow content, like a webpage. In the video, scroll events are key to demonstrating the Throttle technique in the context of an infinite scroll implementation. By attaching a Throttle function to the scroll event, the presenter is able to load new content at a controlled rate, improving performance and user experience.

💡Document Object Model (DOM)

The DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The presenter in the video interacts with the DOM to append new elements when the page is scrolled to the bottom, showcasing a practical use of JavaScript to dynamically modify web pages.

💡Closure

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables. The presenter uses closures in the Throttle function to allow the timer variable to be shared and manipulated across multiple invocations of the Throttle function. This concept is pivotal for understanding how Throttle maintains its internal state between events.

Highlights

Introduction to Throttle and its similarity to Debounce

Throttle function implementation and its difference from Debounce

Use case demonstration of Throttle with a scrolling element

Explanation of Throttle function parameters: callback and time

Avoiding the use of arrow functions for Throttle function

Utilizing closure to share the timer variable among Throttle calls

Setting up a timer with setTimeout within Throttle function

Clearing the timer to prevent accumulation of timeouts

Difference in behavior between Throttle and Debounce

Implementation of Infinite Scroll using Throttle

Adding 30 p tags to the page for scrolling demonstration

JavaScript code for Throttle function with detailed explanation

Handling of scroll event listener with Throttle

Checking if the scrollbar has reached the bottom

Loading new elements when reaching the end of the scroll

Adjusting the threshold for triggering new content load

Addressing the callback's arguments and context (this) binding

Conclusion summarizing the key differences between Throttle and Debounce