更新 jQuery $(document).ready() 基本范围内的变量？答案

【问题标题】：Update variables inside the jQuery $(document).ready() base scope?更新 jQuery $(document).ready() 基本范围内的变量？
【发布时间】：2011-03-10 17:19:42
【问题描述】：

我正在尝试找到一种方法来最大限度地减少 Selector 查找的次数。我的问题是我有一个用基本 $(document).ready() 定义的变量，需要在嵌套在 $(document).ready() 中的函数内进行更新

考虑这个例子（编辑：我更新它以更具解释性）

<script>

//var $current_page = $home_page;  **<--I DONT want to do this, going global
                                        and of course it doesn't work since
                                        $home_page isn't defined yet.**

$(document).ready(function() {
  var $home_page = $("#home-page");
  var $portfolio_page = $("#portfolio-page");
  var $about_page = $("#about-page");
  var $current_page = $home_page;  // **<--This variable, in this scope level,
                                   //      is what I want updated**

  $("#home-btn").click(function () {
   $current_page.stop()
   $current_page.show()
   $current_page.animate({
    duration: 360, 
    easing: 'easeInCirc',
    complete: function() {
        $(this).css({ top: -700 });
    }

   ); 

   $current_page = $home_page;
  });

   $("#portfolio-btn").click(function () {
       $current_page.stop()
       $current_page.show()
       $current_page.animate({
         duration: 360, 
         easing: 'easeInCirc',
         complete: function() {
             $(this).css({ top: -700 });
         }

   ); 

   $current_page = $portfolio_page; //<--This needs to somehow update the
                                    //   variable in the $(document).ready
                                    //   scope, but not global**
  });
 });
 <script>

如何更新变量 $current_page 而不使其成为全局变量？

编辑：这样做是为了在您单击菜单项时为当前页面 div 设置动画。是的，它缺少一些东西，是的，它可能没有意义。这只是一个示例，并非实际应用。

我知道这个例子对于性能来说仍然是微不足道的，忽略这个事实。我只想知道如何做到这一点，而不是关于它是否是最佳实践或性能的教训。谢谢各位。

【问题讨论】：

您能否向我们展示一下您遇到性能问题的示例？ ID 选择器查找是迄今为止最快的，如果您遇到性能问题，最好查看特定的瓶颈，而不是尝试在选择器级别进行微优化。
您当前的代码有什么问题？您的示例在方法中对其进行了更改...但在附加 click 处理程序之前已将其设置为此。您是否要重新运行选择器以查找新元素或其他内容？
您的代码正在更新 $current_page。我不明白你的问题。你想做什么？
关于您的编辑：我没有看到问题；正如我在下面所说的，变量 is 在内部函数的范围内......

标签： javascript jquery variables scope document-ready

【解决方案1】：

内部函数创建一个closure，捕获它定义的范围内的变量。所以你已经有了你想要的......

...这是否是一个好主意是另一回事。

对于初学者，您实际上并没有修改您列出的代码中的值 - 您分配给 $current_page 的值与它已经初始化的值相同。

但假设您只是省略了通常用于为$current_page 选择不同值的代码，您需要问自己：这真的是必要 ?您正在执行基于元素 ID 的查找并将对该元素的引用缓存在变量中，而不知道您是否或何时真正需要它。充其量，这会导致潜在的不必要的查找；在最坏的情况下，它可能导致内存泄漏。为什么不只跟踪 ID 本身，并在您真正需要它的时间和地点查找元素呢？在您真正遇到性能问题之前不要担心性能问题...否则您可能会发现您过早的优化导致的问题多于解决的问题。

$home_page、$portfolio_page 和 $about_page 也是如此 - 您正在使您的页面加载（稍微）更慢，因为您稍后需要引用这些元素，当您也可以根据需要查找它们。

【讨论】：

我同意。这只是一个展示范围问题的简短示例，而不是展示将从性能中受益的地方。（我确实省略了另一个页面更改，谢谢！）我将对其进行编辑以显示更深入的示例。该示例不更新 $current_page 变量（也就是说，如果它与 document.ready 范围中最初设置的不同。我试图找到一种方法（不管人们的 cmets 为何）来更新变量它是原始范围，没有导致一直下降到全局，只需在 document.ready 范围内更新它。感谢您的帮助。

【解决方案2】：

“如何更新变量 $current_page 而不使其成为全局变量？”

您可以立即更新它。内部点击处理函数可以修改$current_page。
“我正在尝试找到一种方法来最小化 Selector 查找的次数。”

但实际上，如果您要使用另一个选择器更改 $current_page，您似乎会做得更多。

但目前还不清楚你真正想要做什么。

【讨论】：