干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.免责声明:尚未在所有浏览器上实施.

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