干javascript代码

Question

新手试图学习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)

  })

});

Answer 1

我注意到的一些事情：

• 在第一段代码中，我注意到它们都有position:absolute和opacity:1。为什么不将这些样式定义为所有这些元素都具有的类。

• 调用动画是多余的。为什么不制作选择器和选项的“地图”，然后循环遍历它。从冗余的animate电话中解脱出来。我会上课，但问题是每个元素都有不同的选项。

• 以$(function () {开头的第二个块不需要包含在$(function () {中。实际上，这只是$(document).ready()的缩写。

• setInterval是检查元素可见性的粗略方法。您应该考虑使用DOM Mutation Events。免责声明：It's not implemented on all browsers yet。

• 此外，如果您碰巧注意到，您的间隔设置为永久运行。你没有为计时器提供一种自杀方式，它会不断地在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);

Answer 2

我建议尝试使用$(el).css而不是$(el).animate来尝试CSS过渡。

Answer 3

至少，你可以摆脱动画的绝对和不透明部分，因为它们不会改变任何东西。

其次，使用一些更好的类，以便同时更改相同的元素。或者，您可以传递用逗号分隔的选择器来加入类似的调用。例如：

  

$（“。media-nav3，.media-nav4，.media-nav5，.media-nav6”）。animate（{       'top'：'400px'}，1000）; // 1000毫秒

第三，翻译效率更高，discussed here。

主要的问题是你正在调用过多的jQuery调用，每个调用都会带来很大的开销。