Hi there,
I have a pretty simple example of export function (event handler mouseIn) which works somehow odd for me.
I have a repeater filled with 150 elements. When I had 10 elements all was fine. But the more elements there are, the slower the function works. Although the problem is different.
In the editor the #repeater looks like this: there are a container2 with all elements inside it and the box1 which is collapsed by default. box1 contain 3 dropdowns . These elements are not connected to any dataset. I mean container2 box1 and any of dropdowns.
And here are the functions I have on my site:
export function container2_mouseIn(event) {
let $item = $w.at(event.context);
$item("#box1").expand();
}
export function container2_mouseOut(event) {
let $item = $w.at(event.context);
$item("#box1").collapse();
}
export function box1_mouseIn(event) {
let $item = $w.at(event.context);
$item("#box1").expand();
}
So, as you can see from the functions above I want to achieve with this code is to show dropdowns of the related element #OnMouseIn and to hide it #OnMouseOut of container2.
And this works just fine and fast if you have 3-10 items in the repeater. But if you have 20 f.e. you can see that delays of dropdowns appearance. When I have 150 items is just working very slow and as I have not only these event handlers I even have an error in Chrome console.
The errors are following:
What was done next:
I’ve opened a performance tab in the Chrome and recorded exactly the hover action to look what’s going on with it.
And here is the result:
So mouse out event took 813.6ms. Almost a second. Isn’t it weird?
These whole green columns which is beyond the / Task =>Event Mouse out=>Function Call / consists of three repeating
(anonymous)
_t
r
Again and again. I don’t know what kind of a #recursion is it and why it happens…
This happens even when I have 10 elements on the site. Just if I have 150 it can be seen much better. And I’m starting to have an errors Uncaught RangeError: Maximum call stack size exceeded.
I know a little about the stacks but I really don’t have an idea from this WIX code what’s wrong and why it so?
Does anyone know what’s wrong with my code? And why this kind of recursion happens?
I was also recording an events related to non-repeater elements. I mean just a separate button on my page. And there is no recursion in this case. Just fast and short function call in the console.
Thank you in advance. I appreciate any help on this.