title: Why does this function use 100% cpu only if call it by onclick event
body: <p>When I update the page I call the function setCity() but taking the data from the sessionStorage.</p>
  <pre><code>setCity(sessionData.city_id, sessionData.product_id);
  </code></pre>
  <p>But I also have a button that allows you to change cities</p>
  <pre><code>$(document).on(&quot;click&quot;, &quot;#setCity&quot;, function(e) {
    e.preventDefault();
    $addApp.show(); //Show form
    document.getElementById(&quot;addApp&quot;).reset(); //Reset form
    const id = $(this).data(&quot;id&quot;);
    const city = $(this).data(&quot;city&quot;);
    const city_id = $(this).data(&quot;cityid&quot;);
    const product_id = $(this).data(&quot;product_id&quot;);
    const tec = $(this).data(&quot;tec&quot;);
    const tec_id = $(this).data(&quot;tecid&quot;);
    const campaign_id = $(this).data(&quot;campaign_id&quot;);
  
    sessionStorage.setItem(
      &quot;working_city&quot;,
      JSON.stringify({
        city: city,
        id: id,
        city_id: city_id,
        product_id: product_id,
        tec: tec,
        tec_id: tec_id,
        campaign_id: campaign_id
      })
    );
    // Fill form inputs
    $(&quot;#cityInfo&quot;).show();
    $city.val(city);
    $city_id.val(city_id);
    $product_id.val(product_id);
    $tec.val(tec);
    $tec_id.val(tec_id);
    $(&quot;#assignedCity&quot;).text(city);
  
    //get new data
    setCity(city_id, campaign_id);
  });
  </code></pre>
  <p>I don't understand why but when I press the button the cpu would like to explode but if I update the page it executes the function without problems</p>
  <p>There is the main function setCity();</p>
  <pre><code>function setCity(city_id, campaign_id) {
    $.ajax({
      method: &quot;POST&quot;,
      url: &quot;api/contacts/contacts.php&quot;,
      data: JSON.stringify({
        type: &quot;getPBContact&quot;,
        data: { city_id: city_id, pb_campaign_id: campaign_id }
      })
    }).done(res =&gt; {
      console.log(res);
      var data = res.data;
  
      if (res.success) {
        data.forEach(e =&gt; {
          $address.val(e.address);
          $full_name.val(e.full_name);
          var tel = new libphonenumber.AsYouType(&quot;IT&quot;).input(e.tel);
          var cel = new libphonenumber.AsYouType(&quot;IT&quot;).input(e.cel);
          $telefono.val(tel);
          $cellulare.val(cel);
          $address_book_id.val(e.id);
          $city_id.val(city_id);
        });
      }
    });
  }
  </code></pre>
  <h3>Edit:</h3>
  <p>I believe I have found the problem and I assume it is in the query thats &quot;<strong>ORDER BY RAND()</strong>&quot;:</p>
  <pre><code>SELECT * FROM ' . $this-&gt;tableName . ' ab 
              WHERE 
              ab.source = &quot;PB&quot; AND 
              ab.city_id = :city_id AND 
              pb_campaign_id = :pb_campaign_id AND 
              ab.id NOT IN (SELECT address_book_id FROM calls WHERE calls.address_book_id = ab.id AND calls.status_id IN (&quot;C&quot;,&quot;NO&quot;) OR (calls.status_id IN (&quot;NR&quot;,&quot;OC&quot;) AND TIMESTAMPDIFF(MINUTE,calls.updated_at,NOW()) &lt; 30))
              ORDER BY RAND() &lt;----- THIS!!!
              LIMIT 1';
  </code></pre>
  <p>There is a solution for &quot;<strong>ORDER BY RAND()</strong>&quot; but in big tables?</p>