ajax请求使页面滞后

Question

I have this ajax request code

function hehe2(){
  var a = $(".film2numb").val();
  return $.ajax({
    type : "GET",
    url : "php/controller1.php?page=semuafilm",
    data : "data="+a,
    cache: false,
    success: function(data){
      $('.semuafilm').load('php/film.php');
    },
  });
}

and it requests this php code, basically it prints out HTML data from SQL

      <?php            
        $indicator = $_SESSION['p'];
        if ($indicator == 'filmbaru') {
          # code...
          $batas = $_SESSION['a'];
          if (!$batas) {
            $batas = 1;
          }
          if ($batas>1) {
            $batas = $batas * 8;
          }
          include('connect.php');
          $queryfilm = "select * from tb_film order by film_year desc, film_id desc limit $batas ,8";
          $exec =  $conn->query($queryfilm);
            while ( $f = $exec->fetch_assoc()) {
         $tn = str_replace(" ","-",$f['film_name']) ;
      ?>
      <div class='col l3 m3 s6 itemovie'><div><img src="images/dum.jpg" class="lazy" data-original='http://www.bolehnonton.com/images/logo/<?php echo $f["film_logo"]; ?>' width="214" height="317"><div><div><div><p><b><?php echo $f['film_name']; ?></b></p><p>IMDB Rating</p><p><?php echo $f['film_genre']; ?></p><p class='center-align linkmov'><a class='dpinblock browntex' href='?page=movie&filmname=<?php echo $tn; ?>'>PLAY MOVIE</a></p><p class='center-align linkmov'><a class='dpinblock' href=''>SEE TRAILER</a></p></div></div></div></div></div>
      <?php
          }
      ?>

and here is the controller

            <?php 
                session_start();
                $a = $_GET['data'];
                $p = $_GET['page'];
                $g = $_GET['genre'];

                $_SESSION['a'] = $a;
                $_SESSION['p'] = $p;
                $_SESSION['g'] = $g;
             ?>

My question is why every time I click button that binded to the hehe2() function (4-5 times, which requested a lot of images) the page get heavier as I click incrementally(laggy, slow to scroll), is there a way to make it lighter, or is there a way to not store image cache on page or clear every time I click the button that binded to hehe2() function?

Answer 1

I am not sure that my advice will be helpful, I will just share my experience. First of all you should check your binding. Do you bind click trigger only once? Sometimes function binds multiple times and it can slow down the page. You can put code below inside function and check the console

console.log("Function called");

If everything is fine from that point and function fires only once - I would recommend you to change flow a little bit. Is it possible to avoid many clicks in a row? If it is not big deal - you can disable button on click, show loader and enable button when AJAX request is completed. This approach will prevent from making multiple requests at once at page will be faster.