title: $w.at Event Handler runs recursive when fired on repeater. WIX / Corvid / Velo
body: <p>I have a pretty simple example of export function (event handler <code>mouseIn</code>) which works somehow odd for me.</p>
  <p>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.
  <a href="https://i.stack.imgur.com/yxk7m.jpg" rel="nofollow noreferrer">Repeater elements</a></p>
  <p>In the editor the <code>#repeater</code> looks like this: there are a <code>container2</code> with all elements inside it and the <code>box1</code> which is collapsed by default. <code>box1</code> contain 3 <code>dropdowns</code>. These elements are not connected to any dataset. I mean <code>container2</code> <code>box1</code> and any of <code>dropdowns</code>.
  <a href="https://i.stack.imgur.com/1DBNu.jpg" rel="nofollow noreferrer">Repeater in Editor</a></p>
  <p>And here are the functions I have on my site:</p>
  <pre><code>export function container2_mouseIn(event) {
   let $item = $w.at(event.context);
      $item(&quot;#box1&quot;).expand();
  }
  export function container2_mouseOut(event) {
   let $item = $w.at(event.context);
      $item(&quot;#box1&quot;).collapse();
  }
  export function box1_mouseIn(event) {
   let $item = $w.at(event.context);
      $item(&quot;#box1&quot;).expand();
  }
  </code></pre>
  <p>So, as you can see from the functions above I want to achieve with this code is to show <code>dropdowns</code> of the related element <code>#OnMouseIn</code> and to hide it <code>#OnMouseOut</code> of <code>container2</code>.</p>
  <p>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 <code>dropdowns</code> 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.</p>
  <p>The errors are following:
  <a href="https://i.stack.imgur.com/Iq1nW.jpg" rel="nofollow noreferrer">Errors</a></p>
  <p>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 <a href="https://i.stack.imgur.com/171Cn.jpg" rel="nofollow noreferrer">result</a></p>
  <p>So mouse out event took 813.6ms. Almost a second. Isn't it weird?
  These whole green columns which is beyond the <strong>/ Task =&gt;Event Mouse out=&gt;Function Call /</strong> consists of three repeating</p>
  <p><strong>(anonymous)</strong><br />
           <strong>_t</strong><br />
            <strong>r</strong></p>
  <p>Again and again. I don't know what kind of a #recursion is it and why it happens...<br />
  <a href="https://i.stack.imgur.com/dAEu2.jpg" rel="nofollow noreferrer">Recursion</a></p>
  <p>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?</p>
  <p><strong>Does anyone know what's wrong with my code? And why this kind of recursion happens?</strong></p>
  <p>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.</p>
  <p><em><strong>Thank you in advance. I appreciate any help on this.</strong></em></p>