从数据库到数组的 jQuery 多个 get() - 好主意吗？答案

【问题标题】：jQuery multiple get() from database to array - good idea?从数据库到数组的 jQuery 多个 get() - 好主意吗？
【发布时间】：2011-07-23 09:52:47
【问题描述】：

我正在尝试为许多带有章节的书籍制作“幻灯片”查看器。 “幻灯片”是存储在数据库中的 HTML 数据块。一章可以包含 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？

【问题讨论】：

标签： php jquery mysql get

【解决方案1】：

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

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

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

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

当然：

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

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

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

【讨论】：

我同意这一点。 HTTP 请求会产生巨大的开销（对于服务器和客户端）。如果一页真的是 1-2 kB 左右，您也可以一次性加载一整章（当您接近特定页面时，图片会动态加载）。

【解决方案2】：

不，这绝对不是一个好主意。我建议你只做一个 $.get() 请求来接收 JSON 数组中的所有记录。

关于关闭，您必须观看优秀的 Douglas Crockfords 的视频"The JavaScript Programming Language" (4 parts)。是的，闭包可以这样使用，它们很棒。

【讨论】：