使用 JQuery 过度刷新页面

Question

我有以下代码设置：（对于 uni 项目）。

本质上，图书 Store.php 旨在每 5 分钟更新和显示图书列表。

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

反过来，Books.php 意味着每 30 秒更新和显示书页列表。

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

第一次加载页面时，一切正常，直到 BooksStore.php 尝试重新加载图书列表。发生的情况是 Books.php 将正确重新加载，但 BooksPages.php 将重新加载多次。

BookStore 第二次重新加载 - Books.php 将重新加载 BooksPages.php 2 次。

BookStore 第 3 次重新加载 - Books.php 将重新加载 BooksPages.php 6 次。

BookStore 第 4 次重新加载 - Books.php 将重新加载 BooksPages.php 8 次。

BookStore 第 5 次重新加载 - Books.php 将重新加载 BooksPages.php 12 次。

依此类推，直到服务器开始变慢并且运行资源耗尽.... ???为什么会发生这种情况/如何解决。

提前致谢，

Answer 1

实际上 Store.php 每 5 分钟初始化一次对 Books() 函数的调用。因此，每次它都会为 BookPages 创建一个新的计划，除非您使用函数 clearInterval() 清除前一个计划。因此，在调用 Books() 函数之前，您应该清除 BookPages().

的时间表

你可以从这个link学习clearInterval()的用法：clearInterval w3schools

Answer 2

如@Zim 所说，尝试使用 clearInterval() 检查您的代码现在是否按预期工作：

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>

使用 JQuery 过度刷新页面

Excessive page refreshing with JQuery

php

jquery

out-of-memory

page-refresh