javascript - 干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 是多余的。为什么不制作一个选择器和选项的“ map ”并循环遍历它。将您从冗余的 animate 调用中拯救出来。我会上课，但问题是每个元素都有不同的选项。

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

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

• 此外，如果您碰巧注意到，您的间隔设置为永远运行。您没有包含计时器自行终止的方法，它将不断查询 DOM 中的元素。查询 DOM 是一个缓慢的过程。您应该设置一个标志之类的东西来指示所有内容都在屏幕上并且应该终止计时器。

• 1 毫秒的间隔太过分了。一些浏览器将此限制为 4 毫秒。此外，人类将 200 毫秒或更快视为“即时”，将 400-600 毫秒视为可接受的滞后。

• 既然您有一组静态元素，为什么不缓存它们呢？将它们与选项一起存储在一个数组中。

总而言之，它应该看起来像这样:

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);