3/2/2023 0 Comments Keyup event angular![]() No matter how many times the user fires the event, that function will be executed only once in a given time interval. Let’s execute this function at most once every N milliseconds. To put it in other words, it’s a way to say: ![]() In software development, throttling is used to define a behavior that enforces a maximum number of times a function can be called over time. Let’s try to better understand what these terms actually mean. The first approach is what our sample code is currently doing the second is called throttling, while the third is called debouncing. Take no immediate action and check our messages only when no new notifications have come in for the last five minutes.Take no immediate action and check our messages only once every, let’s say, five minutes.Respond to all notifications in real time, which would be great for the requesting party but would compromise what we're doing.What do we usually do in these cases? Let’s consider the following alternatives: If we think about it, our everyday life is full of situations where we are forced to do something while our attention is captured by something else: social networks like Twitter and instant messaging apps such as WhatsApp are a perfect example of that, since they literally flood us with notifications regardless of what we’re doing. To better understand the concepts of throttling and debouncing, let's try to make a real-life example. Such behavior is intrinsically resource-intensive and can easily become a huge performance issue, especially if we’re dealing with large tables and/or non-indexed columns.Īre there ways to improve this approach without compromising the results obtained in terms of user experience? As a matter of fact, the answer is yes, as long as we’re willing to implement a couple widely used techniques specifically meant to improve the performance of code that gets executed repeatedly within a short period of time: throttling and debouncing. upon each keystroke), Angular fires an HTTP request to the back-end to retrieve the updated list of results. However, this real-time filter has a serious downside in terms of performance impact: every time the filter text changes (i.e. That's great in terms of user experience, because our users will immediately get filtered data as they type. The filter works in real-time because the call to the loadData method is directly bound to the HTML input's keyup event, meaning that will fire upon each user's keystroke. the server performs a query to the data source (ideally a database), using the filterQuery to filter out the results, and returns a JSON object containing the results.our Angular app sends such value ( filterQuery) to the server. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |