更新 jQuery $(document).ready() 基本范围内的变量？
我正在尝试找到一种方法来最小化选择器查找的次数。我的问题是，我有一个用基 $(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。是的，它缺少一些东西，是的，它可能没有意义。这只是一个示例，并非实际应用。
我知道这个例子对于性能来说仍然微不足道，请忽略这个事实。我只是想知道如何实现这一目标，而不是关于这是否是最佳实践或性能的课程。谢谢你们。
I'm trying to find a way to minimize the number of Selector look-ups. My issue is that I have a variable defined with base $(document).ready() that needs to be updated inside functions nested inside $(document).ready()
Consider this example (EDIT: I updated it to be more explanatory)
<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>
How can I update the variable $current_page without making it a global variable?
EDIT:
This is done to animate out the current page div when you click on a menu item. Yes, it's missing things, yes it may not make sense. It's just an example, not the actual application.
I understand this example is still trivial for performance, just ignore that fact. I just want to know how to do achieve this, not a lesson on whether it's the best practice or performance. Thanks guys.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
内部函数创建一个闭包，捕获其定义范围内的变量。所以你已经拥有了你想要的要求...
...这是否是一个好主意是另一回事。
对于初学者来说，您实际上并没有修改所列出的代码中的值 - 您正在为
$current_page分配与已初始化的值相同的值。但假设您只是省略了通常用来为
$current_page选择不同值的代码，您需要问自己：这真的有必要< /em>?您正在根据元素 ID 执行查找，并将对该元素的引用缓存在变量中，而不知道是否或何时真正再次需要它。充其量，这会导致潜在不必要的查找；最坏的情况是，它可能导致内存泄漏。为什么不只跟踪 ID 本身，并在您真正需要的时间和地点查找该元素呢？在您真正遇到性能问题之前，不要担心性能...否则您可能会发现过早的优化导致的问题比它解决的问题还要多。$home_page、$portfolio_page和$about_page也是如此 - 您偶尔会导致页面加载速度（稍微）变慢稍后您将需要对这些元素的引用，此时您也可以根据需要查找它们。The inner function creates a closure, capturing the variables in the scope it is defined in. So you already have what you're asking for...
...whether that's a good idea or not is another matter.
For starters, you're not actually modifying the value in the code you listed - you're assigning
$current_pagethe same value it was already initialized with.But assuming you just omitted the code that you would normally use to pick a different value for
$current_page, you need to ask yourself: is this really even necessary? You're performing a lookup based on an element ID and caching a reference to that element in a variable without knowing if or when you'll actually need it again. At best, this results in a potentially-unnecessary lookup; at worst, it can result in a memory leak. Why not just keep track of the ID itself, and look up the element when and where you actually need it? Don't worry about performance until you actually encounter a performance problem... or you may find that your premature optimization has caused more problems than it solves.Same goes for
$home_page,$portfolio_pageand$about_page- you're making your page load (slightly) more slowly on the off-chance that you'll need a reference to those elements later on, when you could just as well look them up as-needed.“如何更新变量 $current_page 而不使其成为全局变量？”
您可以立即更新。内部点击处理程序函数可以修改 $current_page。
“我正在尝试找到一种方法来最大程度地减少选择器查找次数。”
但事实上，如果您使用另一个选择器更改 $current_page，您将会获得更多。
但目前还不清楚你真正想做什么。
"How can I update the variable $current_page without making it a global variable?"
You can update it right now. The inner click-handler function can modify $current_page.
"I'm trying to find a way to minimize the number of Selector look-ups."
But it seems that in fact you're about to make more, if you're changing $current_page with another selector.
But it isn't really clear what you're really trying to do.