CODEWITHSUNDEEP
phpjqueryout-of-memorypage-refresh
James Hudson
James Hudson

Reputation: 29

Excessive page refreshing with JQuery

I have the following code setup: (for a uni project).

Essentially, Books Store.php is meant to update and display a list of books every 5 minutes. 

// Book Store.php
<head>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
</head>
</body>
    <div class = "container-fluid">
    <div id = "Books"></div>
</body>
<script>
    $(document).ready(function () {
        Books();
        setInterval(Books, 300000);
        $.ajaxSetup({cache: true});
    });
    function Books() {
        $("#Books").load("php/Books.php");
    }
</script>

In turn, Books.php is then meant to update and display a list of Book Pages every 30 seconds. 

// Books.php
// Get List of books from MySQL

// FOR EACH BOOK .....
<div id = "BookPages"></div>

<script>
    $(document).ready(function () {
        BookPages();
        setInterval(BookPages, 30000);
        $.ajaxSetup({cache: true});
    });
    function BookPages() {
        $("#BookPages").load("php/BookPages.php");
    }
</script>
//  CLOSE FOR LOOP

One the first page load, everything works fine, until BooksStore.php tries to reload the books list. What happens is that Books.php will reload correctly, but the BooksPages.php will reload multiple times.

BookStore Reloads 2nd Time - Books.php will reload BooksPages.php 2 times.

BookStore Reloads 3nd Time - Books.php will reload BooksPages.php 6 times.

BookStore Reloads 4nd Time - Books.php will reload BooksPages.php 8 times.

BookStore Reloads 5nd Time - Books.php will reload BooksPages.php 12 times.

And so on until the server begins to slow down & run out of resources.... ??? Why is this happening / how to fix it.

Thanks in Advance,

Upvotes: 0

Views: 73

Answers (2)

Shidersz
Shidersz

Reputation: 17190

Like @Zim says, try using clearInterval() an check if your code now works as expected:

BookStore.php

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div id="Books"></div>
    </div>

    <script>
        var int1;

        $(document).ready(function()
        {
            if (int1)
                clearInterval(int1);

            Books();
            int1 = setInterval(Books, 300000);
            $.ajaxSetup({cache: true});
        });

        function Books()
        {
            $("#Books").load("php/Books.php");
        }    
    </script>
</body>

Books.php

<div id="BookPages"></div>

<script>
    var int2;

    $(document).ready(function()
    {
        if (int2)
            clearInterval(int2);

        BookPages();
        int2 = setInterval(BookPages, 30000);
        $.ajaxSetup({cache: true});
    });

    function BookPages()
    {
        $("#BookPages").load("php/BookPages.php");
    }
</script>

Upvotes: 1

Zim
Zim

Reputation: 182

Actually the Store.php is initializing the call of Books() function every 5 minutes. So each time it creates a new schedule for BookPages unless you clear the previous one by using the function clearInterval(). So before calling the Books() function you should clear the schedule of BookPages().

You can learn the usage of clearInterval() from this link: clearInterval w3schools

Upvotes: 0

Related Questions