Page loading is gradually getting slower using jQuery script

Question

I'm using this jQuery script to show search results. Everything works fine, but when search results have more than one page and I'm browsing pages via paging then every page loading is gradually getting slower. Usually first cca 10 pages loads I get quickly, but next are getting avoiding loading delay. Whole website get frozen for a little while (also loader image), but browser is not yet. What should be the problem?

function editResults(def) {
    $('.searchResults').html('<p class=\'loader\'><img src=\'images/loader.gif\' /></p>');
    var url = def;
    var url = url + "&categories=";
    // Parse Categories
    $('input[name=chCat[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    });
    url = url + "&sizes=";
    // Parse Sizes
    $('input[name=chSize[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    }); 
    url = url + "&prices=";
    // Parse Prices
    $('input[name=chPrice[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    });
    $('.searchResults').load('results.php'+url);
    $('.pageLinks').live("click", function() {
        var page = this.title; 
        editResults("?page="+page);
    });
}
$(document).ready(function(){
    editResults("?page=1");
    // Check All Categories
    $('input[name=chCat[0]]').click(function() {
        check_status = $('input[name=chCat[0]]').attr("checked");
        $('input[name=chCat[]]').each(function() {    
            this.checked = check_status;    
        });
    });
    // Check All Sizes
    $('input[name=chSize[0]]').click(function() {
        check_status = $('input[name=chSize[0]]').attr("checked");
        $('input[name=chSize[]]').each(function() {    
            this.checked = check_status;    
        });
    });
    // Edit Results
    $('.checkbox').change(function() {
        editResults("?page=1");
    });
    // Change Type
   $(".sort").change(function() {               
        editResults("?page=1&sort="+$(this).val());
   });          
});

Are the server responses possibly get slower and slower to come back? It is fairly typical that getting the xth page gets slower as x increases, because more records have to be traversed in the database. You could validate this by printing out timing results on your server-side page, or by capturing timing results with a tool like Fiddler. — mellamokb
– mellamokb, Commented Mar 26, 2014 at 23:35
Yes, you're right. Thank you for your explanation, but what exactly do you mean about printing out timing results on my server-side page? — user2406937
– user2406937, Commented Mar 26, 2014 at 23:56
NOTE: .live() has been deprecated since jQuery 1.7 and has been removed in 1.9. It is recommended you switch to the newer .on() — Kevin Pei
– Kevin Pei, Commented Mar 27, 2014 at 0:09

rodix · Accepted Answer · 2014-03-27 01:00:33Z

4

$('.pageLinks').live("click", function() {
    var page = this.title; 
    editResults("?page="+page);
});

just a wild guess but... wouldn't this piece of code add a new event handler to the click event instead reaplacing the old one with a new one? causing the click to call all the once registered handlers.

you should make the event binding just once

var global_var = '1';

function editResults(def) {
    // all your code
    global_var = 2; // what ever page goes next
};

$(document).ready(function() {
    // all your code ...
    $('.pageLinks').live("click", function() {
        var page = global_var;
        editResults("?page="+page);
    });
});

edited Mar 27, 2014 at 1:00

answered Mar 27, 2014 at 0:06

rodix

4354 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2406937 Over a year ago

This whole script works only with jQuery 1.4 or older. I tried to replace .live() with newer .on() but nothing happened after click. $(document).on("click",".pageLinks",function(){ var page = this.title; editResults("?page="+page); });

rodix Over a year ago

the problem is not related on what method are you calling. In this regard live and on works the same. Every time you call editResults your element(s) pageLinks gets a new event handler, not removing the old one(s).

user2406937 Over a year ago

So how should I make the event binding just once?

rodix Over a year ago

I've edited my response with a very rusty example of what I mean.

Collectives™ on Stack Overflow

Page loading is gradually getting slower using jQuery script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related