Search code examples
phpjqueryout-of-memorypage-refresh

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,

Solution

  • 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>