干javascript代码
新手试图学习javasacript和jquery。 有人可以帮我干掉这段代码。 在我的html网站上运行此代码时，我的CPU使用率很高。 任何帮助是极大的赞赏。 如何为这样的事件声明变量数组甚至函数？
$(document).ready(function () { $("#copy2").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav2").animate({ 'position': 'absolute', 'top': '380px', opacity: 1 }, 1); $("#copy3").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav3").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy4").animate({ 'position': 'absolute', 'top': '-380px', opacity: 1 }, 1); $(".media-nav4").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy5").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav5").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy6").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav6").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy7").animate({ 'position': 'absolute', 'top': '10px', opacity: 1 }, 1); $(".media-nav7").animate({ 'position': 'absolute', 'margin-top': '450px', opacity: 1 }, 1); $("#copy8").animate({ 'position': 'absolute', 'top': '10px', opacity: 1 }, 1); $(".media-nav8").animate({ 'position': 'absolute', 'margin-top': '450px', opacity: 1 }, 1); $("#copy9").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav9").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy10").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav10").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy11").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav11").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy12").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav12").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy13").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav13").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy14").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav14").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy15").animate({ 'position': 'absolute', 'top': '-390px', opacity: 1 }, 1); $(".media-nav15").animate({ 'position': 'absolute', 'top': '400px', opacity: 1 }, 1); $("#copy16").animate({ 'position': 'absolute', 'top': '10px', opacity: 1 }, 1); $(function () { setInterval(function () { $("#copy2").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav2").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy3").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav3").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy4").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav4").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy5").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav5").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy6").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav6").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy7").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $(".media-nav7").filter(":onScreen").animate({ 'position': 'absolute', 'margin-top': '250px', opacity: 1 }, 1700); $("#copy8").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $(".media-nav8").filter(":onScreen").animate({ 'position': 'absolute', 'margin-top': '250px', opacity: 1 }, 1700); $("#copy9").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav9").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy10").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav10").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy11").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav11").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy12").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav12").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy13").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav13").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy14").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav14").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy15").filter(":onScreen").animate({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700); $(".media-nav15").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700); $("#copy16").filter(":onScreen").animate({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700) }, 1) }) }); 我注意到的一些事情：
-
在第一段代码中，我注意到它们都有
position:absolute和opacity:1。 为什么不将这些样式定义为所有这些元素都具有的类。 -
调用动画是多余的。 为什么不制作选择器和选项的“地图”，然后循环遍历它。 使您免于冗余的
animate调用。 我会上课，但问题是每个元素都有不同的选项。 -
第二个块以
$(function () {开头$(function () {不需要包装在$(function () {。实际上，这只是$(document).ready()的简写。 -
setInterval是检查元素可见性的粗略方法。 您应该考虑使用DOM Mutation Events 。 免责声明： 尚未在所有浏览器上实现 。 -
此外，如果您碰巧注意到，您的间隔设置为永久运行。 你没有为计时器提供杀死自己的方法，它会不断地在DOM中查询元素。 查询DOM是一个缓慢的过程。 您应该设置类似标志的东西，以指示屏幕上的所有内容都应该杀死计时器。
-
1ms的间隔是过度的。 有些浏览器将此限制为4毫秒。 此外，人类认为200ms或更快是“即时”，400-600ms是可接受的延迟。
-
既然你有一组静态元素，为什么不缓存它们呢？ 将它们与选项一起存储在一个数组中。
总而言之，它应该看起来像这样：
var targets = [ { element : $('#copy2'), initialAnimationOptions : {...}, onScreenAnimationOptions : {...} }, ... ]; // Initial animation $.each(targets,function(index,target){ target.element.animate(target.initialAnimationOptions); }); // The crude checker setInterval(function(){ $.each(targets,function(index,target){ if(target.element.is(':onScreen') target.element.animate(target.onScreenAnimationOptions); }); },1000);
我建议尝试CSS转换，并使用$(el).css而不是$(el).animate 。
至少，你可以摆脱动画的绝对和不透明部分，因为它们不会改变任何东西。
其次，使用一些更好的类，以便您同时更改相同的元素。 或者，您可以传递用逗号分隔的选择器来加入类似的调用。 例如：
$（“。media-nav3，.media-nav4，.media-nav5，.media-nav6”）。animate（{‘top’：’400px’}，1000）; // 1000毫秒
第三，翻译效率更高，如此处所述 。
主要的问题是你正在调用过多的jQuery调用，每个调用都会带来很大的开销。