php - jQuery multiple get() 从数据库到数组 - 好主意？

Question

我正在尝试为一些包含章节的书籍制作一个“幻灯片”查看器。 “幻灯片”是存储在数据库中的 HTML 数据 block 。一章可以包含 50-100 张幻灯片，但它们非常小(每张 1-​​2 kB 和一些图片)。我希望用户有按钮来点击上一张和下一张幻灯片，并最大限度地减少加载时间。

我现在拥有的是一个名为 ContentFetcher.php 的 PHP 页面，它仅查询数据库以获取一张幻灯片(部分)的内容。

<?php
require_once 'Database.php';
echo Database::getInstance()->getSectionText($_GET["bookID"], $_GET["chapter"], $_GET["section"]);
?>

我的 Javascript 运行一个循环并使用 $.get() 获取当前章节的每个部分:

        $(function() {                                
            <? $db = Database::getInstance(); ?>

            var chapterSize = <?= $db->getChapterSize($this->bookID, $this->chapter) ?>;
            var chapterContent = []; // this is where I want to store the contents
            var currentSection = <?=$this->section;?>;

            for (var i = 1; i <= chapterSize; i++) {
                $.get("ContentFetcher.php", { 
                    bookID  : <?= $this->bookID  ?>,
                    chapter : <?= $this->chapter ?>,
                    section : i
                }, function(data) {
                 chapterContent.push(data);
             });
           }

        $("#slides").html(chapterContent[currentSection]); // show the current slide

     });

那么从性能方面来说这是个好主意吗？如果是这样，我对 JS 闭包的理解还不是很好——我如何才能在闭包中访问相同的 chapterContent？

Answer 1

这个想法意味着您将执行 50 到 100 个 HTTP 请求来加载一章；这些几乎都将同时完成。

因此，每次有人尝试加载章节时，您的网络服务器将在几秒钟内收到 100 个请求——这可能不是一个好主意。

在这种情况下，我可能会尝试实现这样的东西:

• 当用户打开章节时，执行单个 HTTP 请求，该请求将返回前 10 张幻灯片
• 当用户到达幻灯片 8 时，执行单个 HTTP 请求以加载幻灯片 11 到 20
• 当用户到达幻灯片 18 时，执行单个 HTTP 请求以加载幻灯片 21 到 30
• 等等

当然了:

• 如果用户通过键入其 URL(如果可能的话)或使用某些“转到幻灯片 X”功能到达第 56 张幻灯片，您必须执行 HTTP 请求以加载第 51 到 60 张幻灯片。
• 这意味着如果用户从一张幻灯片切换到另一张幻灯片太快，他们可能需要稍等片刻。

它会使您的客户端和服务器端代码更加复杂，但它可能是最好的解决方案之一:

• 您不会一次加载太多数据，
• 您不会预加载太多数据，
• 你不会做太多的 HTTP 请求，
• 这些会提前一点完成，因此用户不必等待新幻灯片的到来。