Demo stuttering
Normal: The event is triggered very frequently, and every time it is triggered, the callback function must be executed (if the time is short and there is calculation inside the callback function, it is easy for the browser to freeze)
Under normal circumstances (the user operates slowly): the mouse enters, and each first-level classification h3 will trigger the mouse enter event
Abnormal situation (user operation is too fast): All the first-level classifications should trigger the mouse entry event, but after testing, only part of h3 triggers. It is because the user's behavior is too fast, causing the browser to fail to respond. If there are some large businesses in the current callback function, there will be a lag phenomenon
anti shake
Anti-shake: All the previous triggers are canceled, and the last execution will be triggered after the specified time, that is to say, if the triggers are triggered continuously and quickly, only the last execution will be executed
Lodash Introduction | Lodash Chinese Documentation | Lodash Chinese Network (lodashjs.com)
Lodash plug-in: the anti-shake and throttling business of the encapsulated function [closure + delayer]
1.lodash exposes_function _
Operate anti-shake through _.decounce
throttling
Throttling: The callback will not be triggered repeatedly within the specified interval, and the callback will only be triggered if it is greater than this time interval, turning frequent triggers into a small number of triggers
use the throttling function
Throttling: At present, this callback function is executed once every 5s
If there are a lot of business codes in it, can you give the browser enough time to parse it?
Complete the three-stage linkage throttling operation
No need to install lodash, the project comes with
According to this, the throttling effect can be realized. But this throttle cannot be written as an arrow function, otherwise there will be problems
Analysis of three-level linkage routing jump
Three-level linkage users can click: first-level classification, second-level classification, third-level classification, when you click
The Home module jumps to the Search module, and the first level will pass the product selected by the user (product name, product ID) when the route jumps.
Routing jump:
Declarative Navigation: router-link
Programmatic navigation: push|replace
Three-level linkage: If you use the declarative navigation router-link, you can realize routing jumps and pass parameters.
But be careful, there is a Caton phenomenon.
router-link: It can be a component. When the data from the server is returned, a lot of router-link components will be cycled [creating an instance of the component] 1000+
When creating a component instance, 1000+ lots of memory are created in an instant, so there is a lag phenomenon.
But this way of writing is not the best. If there are 1000 callbacks. Then don't tune it 1000 times?
At this point we can use time delegation. Bind this event with its nearest parent element
The best solution of all is: programmatic navigation + event delegation
There are some problems in using event delegation: 1. Clicking is not necessarily a label 2. How to get parameters [1, 2, 3 classification product name, id]
Complete the three-level linkage routing jump and transfer parameter business
1. Clicking is not necessarily a label
Solution: put a label in the child node, I add the custom attribute data-categroyName, and the rest of the child nodes are not
And we can get this target through event.target. But note that the name in our source code is uppercase, but it is lowercase in the browser (the browser automatically converts it)
One attribute of a node is the dataset attribute, which can get the custom attributes and attribute values of the node. Then structure the categoryname, if there is a categoryname in the label, it must be a label
2. How to get the parameters [1, 2, 3 classification product name, id] We can use the same method to give it a custom attribute
In this way, routing jump and parameter passing can be realized.