0

I have a website that uses ajax for paging, the page system works according to the hashchange event, whenever I want to move to another page, I call a function that change the hash to the page number, when the hash changed the hashchange event is fired and call a function to get the page data .
However, it works perfectly except one thing, if I change the page more than 3-4 times the page will not respond and will crash, I check the network tap in the Inspect element in google chrome and what I see is when I change the page the number of ajax requests will be doubled and the transferred data also will be doubled, which will cause a memory leak.
Eventually, I've tried to do the paging thing without hashchange to see if the problem will be solved, and it worked like charm.
Can you please till me what to do ? thanks in advance

hashchange event 

$(window).bind('hashchange', function () {
search(0);
});

changehash function 

function ChangeHash(p) {
window.location.hash = p;
}

page button 

$('#Pages').append("<button type='button' class='btn btn-default"+active+"' Onclick=\"ChangeHash(" + a + ")\">" + a + "</button>");
Rawhi
  • 6,155
  • 8
  • 36
  • 57

1 Answers1

0

The code you've given doesn't show it, but most likely what's happening is that after each xhr you are re-running that bind call.

Hence, you are double, triple, quadruple binding the event unintentionally - which is precisely what the network log shows: haschange is running 2,3,4,5 ... times until the browser crashes.

To avoid this, make sure 

$(window).bind('hashchange', function () {
search(0);
});

Is only run once.

user3751385
  • 3,752
  • 2
  • 24
  • 24